Bagaimana untuk menukar css dalam js

JavaScript (pendek kata JS) ialah bahasa skrip ringan yang sering digunakan untuk memproses acara pada halaman web dan mencipta kesan dinamik serta interaksi. CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk mereka bentuk rupa dan reka letak halaman web. JavaScript mencapai kesan dinamik pada halaman web dengan menukar sifat CSS secara dinamik Yang paling biasa digunakan ialah menukar CSS melalui JS.

Pada halaman web, gaya CSS biasanya ditakrifkan dalam fail CSS dan kemudian dirujuk oleh satu siri elemen HTML. JavaScript boleh mendapatkan rujukan kepada elemen ini dan kemudian menukar sifat CSSnya. Contohnya, untuk menukar warna latar belakang div elemen tertentu dalam halaman web, anda boleh menggunakan kod berikut:

var elem = document.getElementById("myDiv");
elem.style.backgroundColor = "blue";

Kod ini mula-mula menggunakan kaedah document.getElementById() untuk mendapatkan elemen dengan id myDiv, dan kemudian menggunakan Atribut gaya mendapat objek gaya CSS elemen, dan akhirnya menukar warna latar belakang elemen dengan menetapkan atribut backgroundColor.

Selain menggunakan JavaScript untuk menukar sifat CSS, anda juga boleh menukar gaya elemen dengan menambah atau mengalih keluar kelas CSS. Kelas CSS merujuk kepada koleksi gaya CSS yang boleh digunakan pada berbilang elemen pada masa yang sama. Contohnya, terdapat berbilang butang dalam halaman web dan gayanya ditentukan oleh kelas .button Pada masa ini, anda boleh menambah atau mengalih keluar kelas ini melalui kod JavaScript untuk menukar gaya semua butang. Pelaksanaan khusus adalah seperti berikut:

var btn = document.getElementById("myBtn");
btn.classList.add("button-style"); // 添加button-style类
btn.classList.remove("button-style"); // 移除button-style类

Dalam kod ini, mula-mula dapatkan elemen butang dengan id myBtn, dan kemudian dapatkan senarai kelas CSS yang terkandung dalam elemen melalui atribut classList. Kemudian, anda boleh menggunakan kaedah add() untuk menambah kelas CSS dan kaedah remove() untuk mengalih keluar kelas CSS.

Selain daripada dua kaedah di atas, anda juga boleh menambah gaya CSS pada halaman secara dinamik dengan membuat helaian gaya baharu. Kaedah ini biasanya digunakan apabila sejumlah besar gaya dinamik perlu ditambah. Sebagai contoh, anda boleh mencipta helaian gaya baharu dan menambah beberapa gaya dinamik padanya melalui kod berikut:

var styleElem = document.createElement("style");
styleElem.type = "text/css";
styleElem.innerHTML = ".myDiv {background-color: blue; color: white;}";
document.head.appendChild(styleElem);

Dalam kod ini, mula-mula buat teg gaya baharu dan tetapkan atribut jenisnya kepada teks /css . Kemudian, gunakan atribut innerHTML untuk menambah kelas .myDiv pada helaian gaya, yang mengandungi tetapan untuk warna latar belakang dan warna fon. Akhir sekali, gunakan kaedah appendChild() untuk menambah helaian gaya baharu pada teg kepala halaman.

Secara amnya, JavaScript sangat fleksibel dalam mengendalikan gaya CSS dan boleh mencapai pelbagai kesan dinamik dan interaksi. Walau bagaimanapun, penggunaan gaya CSS dinamik yang berlebihan mungkin mempunyai kesan negatif pada prestasi halaman web Untuk beberapa gaya statik asas, sebaiknya gunakan fail CSS statik.

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