JavaScript mendapat gaya CSS
Sintaks:
nodeObject.style.cssProperty
Antaranya, nodeObject ialah objek nod dan cssProperty ialah sifat CSS.
Contohnya:
document.getElementById("demo").style.height; document.getElementById("demo").style.border;
Nota: Untuk sifat CSS yang dipisahkan dengan "-", keluarkan "-" dan gunakan huruf besar pertama selepas "-". Contohnya:
warna latar belakang hendaklah ditulis sebagai warna latar
tinggi garis hendaklah ditulis sebagai lineHeight
Contohnya:
document.getElementById("demo").style. backgroundColor; document.getElementById("demo").style.lineHeight;
Sebagai contoh, dapatkan gaya daripada nod dengan id="demo" :
<div id="demo" style="height:50px; width:250px; margin-top:10px; text-align:center; line-height:50px; background-color:#ccc;"> 點(diǎn)擊這里獲取CSS樣式 </div> <script type="text/javascript"> document.getElementById("demo").onclick=function(){ alert( "高度:"+this.style.height+"\n"+ "寬度:"+this.style.width+"\n"+ "上邊距:"+this.style.marginTop+"\n"+ "對(duì)齊:"+this.style.textAlign+"\n"+ "行高:"+this.style.lineHeight+"\n"+ "背景顏色:"+this.style.backgroundColor ); } </script>
Ubah suai sedikit kod di atas untuk memisahkan gaya CSS daripada HTML:
<style> #demo{ height:50px; width:250px; margin-top:10px; text-align:center; line-height:50px; background-color:#ccc; } </style> <div id="demo"> 點(diǎn)擊這里獲取CSS樣式 </div> <script type="text/javascript"> document.getElementById("demo").onclick=function(){ alert( "高度:"+this.style.height+"\n"+ "寬度:"+this.style.width+"\n"+ "上邊距:"+this.style.marginTop+"\n"+ "對(duì)齊:"+this.style.textAlign+"\n"+ "行高:"+this.style.lineHeight+"\n"+ "背景顏色:"+this.style.backgroundColor ); } </script>
Anda boleh mendapati bahawa gaya CSS tidak boleh diperolehi selepas memisahkan gaya CSS daripada kod HTML. Ini kerana
nodeObject.style.cssProperty
memperoleh gaya yang ditakrifkan oleh atribut gaya pada nod DOM Jika atribut gaya tidak wujud, atau atribut gaya tidak mentakrifkan yang sepadan gaya, ia tidak akan dapat diperolehi.
Dengan kata lain, JavaScript tidak akan pergi ke teg <style> atau fail CSS untuk mendapatkan gaya yang sepadan, tetapi hanya boleh mendapatkan gaya yang ditakrifkan oleh atribut gaya.