Bagaimana untuk mengubah suai css dalam javascript

Dalam pembangunan web, kami selalunya perlu mengubah suai gaya CSS melalui JavaScript dan menukar gaya elemen dalam halaman web secara dinamik untuk mencapai pengalaman interaksi pengguna yang lebih baik. Artikel ini akan memperkenalkan cara JavaScript mengubah suai CSS, termasuk aspek berikut:

1. Ubah suai gaya elemen
2. Tambah helaian gaya secara dinamik
3. Dapatkan gaya yang dikira
4. Ubah suai nama kelas

1 Ubah suai gaya elemen

Untuk mengubah suai gaya elemen, kita boleh melakukannya melalui atribut gaya JavaScript. Atribut gaya mewakili gaya sebaris elemen, dan gaya elemen boleh diubah suai secara langsung melalui atribut ini. Sebagai contoh, kita boleh menetapkan warna latar belakang elemen div kepada merah melalui kod berikut:

var divElement = document.getElementById("example");
divElement.style.backgroundColor = "red";

Di sini, kami menggunakan fungsi getElementById untuk mendapatkan elemen div dengan id contoh, dan kemudian gunakan atribut gaya untuk Tetapkan warna latar belakangnya.

Selain backgroundColor, kami juga boleh menetapkan banyak gaya elemen lain melalui atribut gaya, seperti warna, fon, padding, dll. Format sintaks khusus ialah:

element.style.property = value;

Antaranya, harta ialah nama atribut gaya, dan nilai ialah nilai atribut, contohnya:

divElement.style.color = "blue";
divElement.style.fontSize = "20px";
divElement.style.padding = "10px";

2. Secara dinamik menambah helaian gaya

Kadangkala, kita perlu menambah secara dinamik helaian gaya baharu ke halaman web untuk mencapai kawalan gaya yang lebih fleksibel. Pada masa ini, kami boleh menggunakan fungsi createElement dan appendChild JavaScript untuk menambah helaian gaya secara dinamik.

Langkah khusus adalah seperti berikut:

1. Buat elemen pautan.

var linkElement = document.createElement("link");

2. Tetapkan atribut rel, jenis dan href bagi elemen pautan, di mana:

• Atribut rel mewakili jenis helaian gaya , biasanya ditetapkan kepada lembaran gaya.
• Atribut jenis menunjukkan jenis fail helaian gaya, biasanya ditetapkan kepada teks/css.
• atribut href mewakili laluan fail helaian gaya, yang boleh menjadi laluan relatif atau laluan mutlak.

linkElement.rel = "stylesheet";
linkElement.type = "text/css";
linkElement.href = "style.css";

3. Tambahkan elemen pautan pada elemen kepala.

var headElement = document.getElementsByTagName("head")[0];
headElement.appendChild(linkElement);

Dengan cara ini, helaian gaya berjaya ditambahkan pada halaman web. Perlu diingatkan bahawa sebelum menambah helaian gaya, kita perlu memastikan fail helaian gaya telah dimuatkan. Jika tidak, gaya mungkin tidak akan berkesan.

3. Dapatkan gaya yang dikira

Kadangkala, kita perlu mendapatkan gaya terkira sesuatu elemen, iaitu gaya terakhir selepas semua peraturan gaya digunakan pada elemen. Contohnya, jika kita perlu mendapatkan warna latar belakang yang dikira bagi elemen div tertentu, kita boleh menggunakan fungsi getComputedStyle JavaScript untuk mencapai ini.

Langkah khusus adalah seperti berikut:

1. Dapatkan objek elemen.

var divElement = document.getElementById("example");

2. Gunakan fungsi getComputedStyle untuk mendapatkan gaya yang dikira.

var computedStyle = window.getComputedStyle(divElement);

3. Dapatkan nilai atribut gaya yang dikira.

var backgroundColor = computedStyle.backgroundColor;

Perlu diperhatikan di sini bahawa fungsi getComputedStyle mengembalikan objek CSSStyleDeclaration, yang mengandungi semua gaya elemen yang dikira. Jika anda ingin mendapatkan nilai atribut tertentu, anda perlu menggunakan atribut objek yang sepadan Sebagai contoh, computedStyle.backgroundColor mewakili warna latar belakang elemen yang dikira.

4. Ubah suai nama kelas

Kadangkala, kita perlu menukar gaya elemen dengan mengubah suai nama kelas. Sebagai contoh, kita perlu menukar warna latar belakang elemen div dengan mengklik butang, yang boleh dicapai dengan mengubah suai atribut kelas elemen tersebut.

Langkah khusus adalah seperti berikut:

1. Buat elemen butang.

var buttonElement = document.createElement("button");
buttonElement.textContent = "切换背景色";

2. Tambah pengendali acara klik pada elemen butang.

buttonElement.addEventListener("click", function() {
  var divElement = document.getElementById("example");
  divElement.classList.toggle("highlight");
});

Di sini, kami menambah fungsi pengendali acara klik, yang menggunakan atribut classList untuk mengubah suai atribut kelas bagi elemen. Kami menggunakan fungsi togol untuk menukar sama ada elemen mengandungi nama kelas serlahan Jika elemen asalnya tidak mengandungi nama kelas serlahan, tambahkan nama kelas, alih keluar nama kelas.

3. Tambah elemen butang pada halaman web.

document.body.appendChild(buttonElement);

Dengan cara ini, anda boleh menukar warna latar belakang elemen div secara dinamik dengan mengklik butang.

Ringkasan:

Fungsi kawalan gaya JavaScript memberikan kami kaedah kawalan gaya halaman web yang kaya Dengan menguasai kemahiran yang diperkenalkan di atas, kami boleh mencapai gaya halaman web yang lebih fleksibel dan interaktif. Pada masa yang sama, kawalan gaya juga merupakan salah satu kemahiran penting untuk pembangunan bahagian hadapan Web. Saya harap artikel ini dapat membantu pembaca.

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai css dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!