HTML DOM笔记——2：访问元素样式信息

1.使用obj.style访问元素使用style属性设置的行间样式信息，该方法不能访问使用<style type="text/css"></style>和由外部导入CSS文件设置的样式信息。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312"/>
<title>obj.style访问样式信息</title>
<style type="text/css">
    p{
    height:100px;
}
</style>
</head>
<body>
<p style="color:blue;">My first page</p>
<script type="text/javascript">
    var e = document.getElementsByTagName("p")[0];
    console.log(e.style["color"]);  //输出blue
    console.log(e.style["height"]) ;  //无法访问样式信息，输出空
</script>
</body>
</html>

2.obj.currentStyle是IE中使用的方法，该方法可以访问元素最终的样式信息。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312"/>
<title>IE中使用obj.currentStyle访问样式信息</title>
<style type="text/css">
    p{
    height:100px;
   
}
</style>
</head>
<body>
<p style="color:blue;">My first page</p>
<script type="text/javascript">
    var e = document.getElementsByTagName("p")[0];
    console.log(e.currentStyle["color"]);  //输出blue
    console.log(e.currentStyle["height"]) ;  //输出100px
   
</script>
</body>
</html>

3.W3C制定的标准方法getComputedStyle(),该方法接受两个参数：要取得计算样式的元素和一个伪元素字符串，如不需要伪元素可以为null.getComputedStyle()方法返回一个CSSStyle对象，包含了元素
　所有样式的计算。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312"/>
<title>使用getComputedStyle()方法访问样式信息</title>
<style type="text/css">
    p{
    height:100px;
    border:1px solid red ;
}
</style>
</head>
<body>
<p style="color:blue;">My first page</p>
<script type="text/javascript">
    var e = document.getElementsByTagName("p")[0];
    var cssObj = document.defaultView.getComputedStyle(e , null);
    console.log(cssObj["height"]);  //输出100px
    console.log(cssObj["color"]) ;  //输出rgb(0 ,0 ,255)
    console.log(cssObj["border"]); //输出 1px solid rgb(255,0,0)
</script>
</body>
</html>


 


 




 






            

            
posted @ 
2017-05-14 00:00 
nopass 
阅读(137) 
评论(0) 
 
收藏 
举报