Bagaimana untuk menggayakan CSS melalui JavaScript

Dalam pembangunan web, menetapkan gaya CSS adalah operasi yang sangat biasa. JavaScript boleh menetapkan gaya CSS melalui operasi DOM. Artikel ini akan memperkenalkan cara menetapkan gaya CSS melalui JavaScript.

1 Dapatkan elemen dan tetapkan gaya

Untuk menetapkan gaya CSS melalui JavaScript, anda perlu mendapatkan elemen untuk digayakan terlebih dahulu. Terdapat banyak cara untuk mendapatkannya dengan mengambil elemen dengan ID "demo" sebagai contoh, anda boleh menggunakan kod berikut:

var demo = document.getElementById("demo");

Selepas mendapatkan elemen, anda boleh menetapkan gaya CSSnya melalui atribut gaya elemen. Contohnya, untuk menetapkan warna latar belakang elemen kepada merah, anda boleh menggunakan kod berikut:

demo.style.backgroundColor = "red";

Begitu juga, anda boleh menggunakan atribut gaya untuk menetapkan saiz, jidar, fon, warna teks, dsb. elemen Anda hanya perlu menukar atribut gaya CSS Tukar nama kepada huruf besar unta dan tetapkan nilai atribut kepada atribut gaya. Contohnya, untuk menetapkan lebar sempadan elemen kepada 1 piksel dan warna sempadan kepada biru, anda boleh menggunakan kod berikut:

demo.style.borderWidth = "1px";
demo.style.borderColor = "blue";

2. Gunakan objek classList untuk menetapkan gaya

Selain menggunakan atribut gaya elemen Selain menetapkan gaya CSS, anda juga boleh menggunakan objek classList untuk menetapkan gaya. Objek classList menyediakan kaedah seperti tambah, alih keluar dan togol untuk mengendalikan atribut kelas elemen untuk mencapai fungsi seperti menambah, memadam dan menukar gaya.

Sebagai contoh, untuk menambah kelas bernama "highlight" pada elemen anda boleh menggunakan kod berikut:

demo.classList.add("highlight");

Untuk mengalih keluar kelas bernama "highlight" anda boleh menggunakan kod berikut :

demo.classList.remove("highlight");

Untuk menukar kelas bernama "highlight", anda boleh menggunakan kod berikut:

demo.classList.toggle("highlight");

3 Tetapkan gaya melalui objek CSSStyleSheet

Dalam JavaScript, helaian gaya CSS juga diwakili sebagai objek, iaitu objek CSSStyleSheet. Gaya CSS juga boleh ditetapkan melalui objek CSSStyleSheet. Untuk menetapkan gaya melalui objek CSSStyleSheet, anda perlu terlebih dahulu mendapatkan helaian gaya untuk dikendalikan. Terdapat banyak cara untuk mendapatkannya. Mengambil helaian gaya dengan ID "styleSheet" sebagai contoh, anda boleh menggunakan kod berikut:

var styleSheet = document.getElementById("styleSheet").sheet;

Selepas mendapatkan helaian gaya, anda boleh menggunakan kaedah insertRule untuk menambah gaya pada helaian gaya. Contohnya, untuk menambah peraturan gaya baharu pada helaian gaya untuk menjadikan warna latar belakang elemen hijau, anda boleh menggunakan kod berikut:

styleSheet.insertRule("#demo {background-color: green;}", 0);

Perhatikan bahawa parameter kedua di sini menunjukkan lokasi di mana peraturan gaya disisipkan 0 bermakna disisipkan pada permulaan helaian gaya, -1 bermakna disisipkan di hujung helaian gaya.

Selain memasukkan peraturan gaya, objek CSSStyleSheet juga menyediakan kaedah deleteRule untuk memadamkan peraturan gaya. Contohnya, untuk memadamkan peraturan gaya pertama dalam helaian gaya, anda boleh menggunakan kod berikut:

styleSheet.deleteRule(0);

4. Ringkasan

Melalui pengenalan di atas, kita boleh memahami cara mengendalikan CSS melalui Gaya JavaScript, termasuk menggunakan atribut gaya elemen, objek classList dan objek CSSStyleSheet. Sudah tentu, ini hanyalah puncak gunung es apabila bercakap tentang penggayaan JavaScript Terdapat banyak penggunaan dan teknik lanjutan yang perlu kita kuasai dan pelajari.

Atas ialah kandungan terperinci Bagaimana untuk menggayakan CSS melalui JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!