国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

JavaScript gets CSS styles

Grammar:
nodeObject.style.cssProperty
Among them, nodeObject is the node object and cssProperty is the CSS property.

For example:

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

Note: For CSS properties separated by "-", remove the "-" and capitalize the first letter after the "-". For example:
background-color should be written as backgroundColor
line-height should be written as lineHeight

For example:

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

For example, get the style of the node with 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>

Slightly modify the above code to separate the CSS style from the 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>

It can be found that the CSS style cannot be obtained after separating the CSS style from the HTML code. This is because
nodeObject.style.cssProperty
obtains the style defined by the style attribute on the DOM node. If the style attribute does not exist, or the style attribute does not define the corresponding style, it cannot Obtained.

In other words, JavaScript will not go to the <style> tag or CSS file to get the corresponding style, but can only get the style defined by the style attribute.

Continuing Learning
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無(wú)標(biāo)題文檔</title> <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> </head> <body> </body> </html>
submitReset Code