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;">
    点击这里获取CSS样式
</div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        alert(
            "高度："+this.style.height+"\n"+
            "宽度："+this.style.width+"\n"+
            "上边距："+this.style.marginTop+"\n"+
            "对齐："+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">
    点击这里获取CSS样式
</div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        alert(
            "高度："+this.style.height+"\n"+
            "宽度："+this.style.width+"\n"+
            "上边距："+this.style.marginTop+"\n"+
            "对齐："+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.