Rumah > Artikel > hujung hadapan web > Pengenalan kepada beberapa cara untuk mengakses sifat CSS dalam petua JavaScript_javascript

Pengenalan kepada beberapa cara untuk mengakses sifat CSS dalam petua JavaScript_javascript

WBOYasal: 2016-05-16 16:41:291407semak imbas

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>

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 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 atau dalam 2cdf5bf648cf2f33323966d7f58a7f3f A

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>

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>

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.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Kaedah mengisytiharkan fungsi dalam JavaScript dan mengembalikan nilai fungsi panggilan_Pengetahuan asasArtikel seterusnya：Kaedah mengisytiharkan fungsi dalam JavaScript dan mengembalikan nilai fungsi panggilan_Pengetahuan asas

Artikel berkaitan

Lihat lagi