Umumnya ada dua cara di mana JavaScript mengakses properti CSS: "akses melalui elemen" dan "akses langsung pada lembaran gaya". Selain itu, ada masalah yang tidak dapat diabaikan saat mengakses gaya - gaya runtime.
1. Akses melalui elemen
Karena Anda ingin mengakses lembar gaya melalui elemen, Anda harus terlebih dahulu menentukan elemen mana itu. Ini adalah konten DOM, jadi saya tidak akan mengatakan lebih banyak tentang itu di sini. Setelah mendapatkan referensi, Anda dapat mengakses atribut tertentu melalui "Reference.Style. Atribut ke Access". Misalnya, lihat kode berikut.
<pre name = "code"> <pre name = "code"> <! Doctype html> <html> <head> <meta charset = "UTF-8"> <tyle> #a {height: 100px; Lebar: 100px; Latar Belakang: Merah; } </tyle> </head> <body> <Div id = "a"> </div> </body> </html>Ketika kami ingin mendapatkan warna latar belakang #A, kami dapat mendokumentasikan.getElementById ("a"). Style.backgroundColor; Dengan cara ini, akses selesai. Setelah itu, apakah akan mengembalikan atau mengubah nilai atribut, terserah Anda.
2. Akses Langsung ke Lembar Gaya
Secara umum, akses langsung ke lembar gaya adalah "Pertama temukan blok gaya yang sesuai, kemudian temukan aturan gaya yang sesuai di blok gaya, dan akhirnya temukan gaya yang sesuai dalam aturan gaya."
Mari kita bicara tentang blok gaya apa yang pertama. Dalam kode, kode CSS akan ada di antara tag <ytyle> </tyle> atau di <link>, dan <style> </tyle> atau <link> adalah blok gaya. Dalam kode, beberapa blok kode dapat diatur secara berurutan dari atas ke bawah, dan kami dapat mengakses blok gaya seperti kami mengakses elemen array. Misalnya, jika kita ingin mengakses yang pertama di blok gaya, kita dapat mendokumentasikan. Stylesheets [0]
Kemudian katakan apa aturan gaya itu. Pertama -tama lihat kode berikut
<pre name = "code"> <! Doctype html> <html> <head> <meta charset = "utf-8"> <tyle> #a {height: 100px; Lebar: 100px; Latar Belakang: Merah; } #b {height: 100px; Lebar: 100px; Latar Belakang: Biru; } </tyle> </head> <body> <Div id = "a"> </div> <div id = "b"> </div> </body> </html>Kode ini masing -masing menentukan gaya #A dan #B. Koleksi gaya #A atau koleksi #B adalah aturan gaya. Dalam blok gaya ini, aturan gaya pertama untuk #A dan aturan gaya kedua untuk #B. Kami juga dapat mengakses aturan gaya seperti kami dapat mengakses elemen array. Misalnya, jika kami ingin mengakses aturan gaya #B, kami dapat mendokumentasikan. Stylesheets [0] .cssrules [1] Tentu saja, Anda dapat memilih untuk menulis dokumen.
Kemudian kita dapat mengakses gaya yang sesuai. Misalnya, jika kita ingin mengubah warna latar belakang #b menjadi hijau, kita dapat mendokumentasikan.
3. Gaya runtime
Lihat kode berikut:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <tyle> #a {height: 100px; Lebar: 100px; Warna: Merah; } #b {height: 100px; Lebar: 100px; } </tyle> </head> <body> <Div id = "a"> <div id = "b"> Amati warna font </div> </div> </body> </html>Saat kami menjalankan peringatan (Document.getElementById ("B"). Style.color);, kami menemukan bahwa tidak ada output di jendela pop-up, tetapi warna font halaman jelas merah. Mengapa? Ini karena atribut objek gaya dari setiap elemen tidak diperbarui secara instan. Ketika kami ingin mengeluarkan merah di jendela pop-up, kami perlu menggunakan gaya runtime. window.getComputedStyle (document.getElementById ("b"), null) .color sehingga Anda dapat mengakses "merah". Ada cara lain untuk mengakses dokumen gaya runtime.getElementById ("b"). Currentstyle.color, tetapi cara ini hanya didukung oleh IE.