Pengenalan kepada beberapa cara untuk mengakses sifat CSS dalam petua JavaScript

Pengenalan kepada beberapa cara untuk mengakses sifat CSS dalam petua JavaScript_javascript

WBOY

Lepaskan： 2016-05-16 16:41:29

asal

1500 orang telah melayarinya

Secara umumnya, terdapat dua cara untuk JavaScript mengakses sifat CSS: "akses melalui elemen" dan "akses terus kepada helaian gaya". Di samping itu, terdapat isu yang tidak boleh diabaikan apabila mengakses gaya - gaya masa jalan.

1. Akses

melalui elemen

Memandangkan anda ingin mengakses helaian gaya melalui elemen, anda harus terlebih dahulu menentukan elemen mana itu. Ini ialah kandungan DOM, jadi saya tidak akan menerangkan butiran di sini. Selepas mendapatkan rujukan, anda boleh mengakses atribut melalui "reference.style.attribute to be accessed". Sebagai contoh, pertimbangkan kod berikut.

<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
background-color:red; 
} 
</style> 
</head> 
<body> 
<div id="a"></div> 
</body> 
</html>

Salin selepas log masuk

Apabila kami ingin mendapatkan warna latar belakang #a, kami boleh mendokumentasikan.getElementById("a").style.backgroundColor Ini melengkapkan akses kepada anda sama ada anda mahu mengembalikan atau menukar nilai atribut .

2. Akses terus helaian gaya

Mengakses secara langsung helaian gaya secara amnya bermaksud "mula-mula cari blok gaya yang sepadan, kemudian cari peraturan gaya yang sepadan dalam blok gaya, dan akhirnya cari gaya yang sepadan dalam peraturan gaya."

Pertama sekali, mari bercakap tentang blok gaya. Dalam kod, kod CSS akan wujud di antara teg atau dalam A Mungkin terdapat berbilang blok kod yang disusun dari atas ke bawah dalam kod dan kita boleh mengakses blok gaya seperti elemen tatasusunan. Contohnya, jika kita ingin mengakses blok gaya pertama, kita boleh document.styleSheets[0]

Kemudian apakah peraturan gaya. Mula-mula lihat kod berikut

<pre name="code" class="html"><!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
background-color:red; 
} 
#b{ 
height:100px; 
width:100px; 
background-color:blue; 
} 
</style> 
</head> 
<body> 
<div id="a"></div> 
<div id="b"></div> 
</body> 
</html>

Salin selepas log masuk

Gaya #a dan #b masing-masing dinyatakan dalam kod Pengumpulan gaya #a atau koleksi #b ialah peraturan gaya. Dalam blok gaya ini, peraturan gaya pertama adalah untuk #a dan peraturan gaya kedua adalah untuk #b. Kami juga boleh mengakses peraturan gaya seperti elemen tatasusunan. Contohnya, jika kami ingin mengakses peraturan gaya #b, kami boleh menggunakan document.styleSheets[0].cssRules[1] Sudah tentu, anda boleh memilih untuk menulis document.styleSheet[0].rules[1] seperti ini, tetapi cara penulisan ini tidak disokong oleh Firefox.

Kemudian kita boleh mengakses gaya yang sepadan. Contohnya, jika kita ingin menukar warna latar belakang #b kepada hijau, kita boleh document.styleSheets[0].cssRules[1].style.backgroundColor="green";

3. Gaya masa jalan

Lihat kod berikut:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
color:red; 
} 
#b{ 
height:100px; 
width:100px; 
} 
</style> 
</head> 
<body> 
<div id="a"> 
<div id="b">观察字体颜色</div> 
</div> 
</body> 
</html>

Salin selepas log masuk

Apabila kami menjalankan alert(document.getElementById("b").style.color); Ini kerana sifat objek gaya setiap elemen tidak dikemas kini dengan segera. Apabila kita ingin mengeluarkan warna merah pada tetingkap timbul, kita perlu menggunakan gaya masa jalan. window.getComputedStyle(document.getElementById("b"),null).color Dengan cara ini anda boleh mengakses "merah". Terdapat satu lagi cara untuk mengakses gaya masa jalan, document.getElementById("b").currentStyle.color, tetapi cara penulisan ini hanya disokong oleh IE.