JavaScript obtient les styles CSS

Syntaxe :
nodeObject.style.cssProperty
Parmi eux, nodeObject est l'objet nœud et cssProperty est la propriété CSS.

Par exemple :

document.getElementById("demo").style.height;
document.getElementById("demo").style.border;

Remarque : Pour les propriétés CSS séparées par "-", supprimez le "-" et mettez en majuscule la première lettre après le "-". Par exemple :
background-color doit être écrit comme backgroundColor
line-height doit être écrit comme lineHeight

Par exemple :

document.getElementById("demo").style. backgroundColor;
document.getElementById("demo").style.lineHeight;

Par exemple, obtenez le style du nœud avec 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>

Modifiez légèrement le code ci-dessus pour séparer le style CSS du 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>

Vous pouvez constater que le style CSS ne peut pas être obtenu après la séparation le style CSS à partir du code HTML. En effet,
nodeObject.style.cssProperty
obtient le style défini par l'attribut style sur le nœud DOM si l'attribut style n'existe pas ou si l'attribut style ne définit pas le correspondant. style, cela ne sera pas possible.

En d'autres termes, JavaScript n'ira pas dans la balise <style> ou dans le fichier CSS pour obtenir le style correspondant, mais ne pourra obtenir que le style défini par l'attribut style.