JavaScript berdiri sendiri menukar css-Soal Jawab bahagian hadapan-php.cn

JavaScript berdiri sendiri menukar css

WBOY

Lepaskan： 2023-05-09 17:33:09

asal

412 orang telah melayarinya

Apabila kami ingin menambah beberapa kesan dinamik pada halaman web, JavaScript mungkin merupakan pilihan terbaik. Salah satu keperluan biasa ialah apabila pengguna melakukan operasi tertentu pada halaman web, gaya elemen halaman web perlu diubah secara dinamik. Pada ketika ini, kita boleh menggunakan JavaScript untuk mengubah suai gaya CSS.

Secara khusus, kami boleh memilih elemen pada halaman web melalui JavaScript dan kemudian mengubah suai sifat CSS yang sepadan. Di bawah, saya akan menunjukkan kepada anda cara menukar gaya CSS bersendirian menggunakan JavaScript.

Pilih elemen

Pertama, kita perlu memilih elemen web yang gayanya ingin kita ubah suai. Terdapat banyak cara untuk memilih elemen, di sini saya akan membincangkan dua yang paling biasa.

Kaedah pertama ialah menggunakan kaedah document.getElementById(), yang memerlukan penghantaran parameter rentetan yang mewakili ID elemen. Contohnya:

var element = document.getElementById("myElement");

Salin selepas log masuk

Kaedah kedua ialah menggunakan kaedah document.querySelector(), yang memerlukan penghantaran pemilih CSS untuk mewakili elemen yang akan dipilih. Contohnya:

var element = document.querySelector(".myClass");

Salin selepas log masuk

Ubah suai gaya

Setelah kami memilih elemen yang gayanya ingin kami ubah, kami boleh menggunakan JavaScript untuk mengubah suai gayanya. Berikut ialah beberapa sifat gaya CSS biasa dan cara mengubah suainya.

2.1. Ubah suai warna latar belakang elemen

Kita boleh menggunakan sifat style.backgroundColor untuk mengubah suai warna latar belakang elemen. Contohnya:

element.style.backgroundColor = "red";

Salin selepas log masuk

2.2 Ubah suai warna teks elemen

Kita boleh menggunakan atribut style.color untuk mengubah suai warna teks elemen. Contohnya:

element.style.color = "blue";

Salin selepas log masuk

2.3 Ubah suai saiz fon elemen

Kita boleh menggunakan atribut style.fontSize untuk mengubah suai saiz fon elemen. Contohnya:

element.style.fontSize = "20px";

Salin selepas log masuk

2.4 Ubah suai gaya sempadan elemen

Kita boleh menggunakan atribut style.border untuk mengubah suai gaya sempadan elemen. Ia memerlukan lulus dalam parameter rentetan yang menunjukkan gaya, lebar dan warna sempadan. Contohnya:

element.style.border = "1px solid black";

Salin selepas log masuk

Contoh

Berikut ialah contoh penggunaan JavaScript untuk menukar gaya CSS bersendirian. Contoh ini mengandungi fail HTML dan fail JavaScript yang menukar warna latar belakang kotak teks kepada merah apabila pengguna mengklik butang. Anda boleh menyimpan kedua-dua fail ke folder yang sama dan membuka fail HTML dalam penyemak imbas untuk melihat kesannya.

Fail HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 修改 CSS 样式</title>
  <style>
    input {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>JavaScript 修改 CSS 样式</h1>
  <input type="text" id="myInput">
  <button id="myButton">单机我</button>
  <script src="style.js"></script>
</body>
</html>

Salin selepas log masuk

Fail JavaScript:

var myButton = document.getElementById("myButton");
var myInput = document.getElementById("myInput");

myButton.onclick = function() {
  myInput.style.backgroundColor = "red";
};

Salin selepas log masuk

Ringkasan

Menggunakan JavaScript untuk menukar gaya CSS bersendirian boleh membantu kami mencipta gaya baharu untuk halaman web Tambah lebih banyak kesan dinamik. Kita boleh mencapai fungsi ini dengan memilih elemen dan mengubah suai gaya. Dalam amalan, kami juga boleh menggunakan lebih banyak sifat CSS dan kaedah JavaScript untuk mencapai kesan yang lebih kompleks.

Atas ialah kandungan terperinci JavaScript berdiri sendiri menukar css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!