获取元素的style属性

简介:

r如何获取元素的style属性呢?

一般我们想到的方法是使用obj.style

例如

Html代码   收藏代码
  1. <nav>  
  2. <div id="overflow" >  
  3. <div class="container">  
  4. <a href="index.asp">Home1</a>  
  5. <a href="html5_meter.asp">Previous2</a>  
  6. <a href="html5_noscript.asp">栏目3</a>  
  7. <a href="html5_noscript.asp">栏目4</a>  
  8. <a href="html5_noscript.asp">栏目5</a>  
  9. <a href="html5_noscript.asp">栏目6</a>  
  10.   
  11.   
  12. </div>  
  13. </div>  
  14. </nav>  

 我们使用js:

Js代码   收藏代码
  1. document.getElementById("overflow").style  

 但是发现没有获取到style!!!这时我们就非常纳闷了,我确实在外部css文件中编写了overflow的样式啊,怎么获取不到呢?

注意:obj.style获取的只是元素的内联样式,如果没有设置,返回空.

 

以下方法是获取元素最终的css样式(计算后的css样式)

Html代码   收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">  
  6. <script  type="text/javascript">  
  7. function getStyle2(obj)  
  8. {  
  9.     if(obj.currentStyle===undefined)  
  10.     {  
  11.         return getComputedStyle(obj);  
  12.     }else{  
  13.         return obj.currentStyle;//IE  
  14.     }  
  15. }  
  16. window.onload=function()  
  17. {  
  18.     var para=document.getElementsByTagName('p')[0];  
  19.     var currentStyle=getStyle2(para);  
  20.     alert("'"+currentStyle["color"]+"' \t\t   '"+currentStyle["margin"]+"'");  
  21. }  
  22. </script>  
  23. <style>  
  24. p{  
  25.     margin:30px;  
  26. }  
  27. </style>  
  28. </head>      
  29. <body>  
  30. <p style="color:red;" >  
  31. 这是一个段落.  
  32. </p>  
  33. </body>  
  34. </html>  

 运行结果:

IE9中:

 

IE8中:

 可见IE8和IE9的反应是相同的.

火狐中:

 

chrome中:

 我们发现火狐中获取不到margin属性.但是在IE和chrome中都可以获取到margin.

那我们换一种方式:

Js代码   收藏代码
  1. window.onload=function()  
  2. {  
  3.     var para=document.getElementsByTagName('p')[0];  
  4.     var currentStyle=getStyle2(para);  
  5.     alert("'"+currentStyle["color"]+"' \t\t   '"+currentStyle["margin-top"]+"'");  
  6. }  

 在火狐中运行结果:

 可以获取到margin-top,但是不能获取到margin.我猜测,火狐同样也可以获取到margin-left,margin-right,margin-bottom.经过我的验证,确实可以.

我进一步推理:如果我单单设置了padding,在火狐中就必须通过padding-left,padding-right,padding-top或padding-bottom来获取了.

总结:

(1)使用obj.style不能获取元素的最终样式;

(2)在chrome和火狐中返回的颜色是rgb模式,而在IE中返回的颜色是单词(例如"red");

(3)在火狐中无法获取"margin"或"padding",必须通过margin-[方位]padding-[方位]的方式来获取.

 

参考:http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/

http://segmentfault.com/blog/kidsamong/1190000002545307

 

相关文章
|
7月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
124 0
|
3月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
71 1
|
3月前
|
前端开发
内部样式表(style元素)
内部样式表(style元素)。
32 2
|
6月前
|
前端开发 开发者
CSS列表属性:list-style系列属性详解
CSS列表属性:list-style系列属性详解
305 40
如何修改ELEMENT组件中的padding间距-样式名不能重复问题
如何修改ELEMENT组件中的padding间距-样式名不能重复问题
|
7月前
Margin - 简写属性
Margin - 简写属性。
60 1
CSS3 【display: flex;】与【order: 控制子元素的顺序;】的使用
CSS3 【display: flex;】与【order: 控制子元素的顺序;】的使用
83 0
|
JavaScript 开发者
veu 中通过属性绑定为元素绑定 style 行内样式|学习笔记
快速学习 veu 中通过属性绑定为元素绑定 style 行内样式
126 0
veu 中通过属性绑定为元素绑定 style 行内样式|学习笔记
|
前端开发 JavaScript 开发者
组件中 style 标签 lang 属性和 scoped 属性的介绍| 学习笔记
快速学习组件中 style 标签 lang 属性和 scoped 属性的介绍
组件中 style 标签 lang 属性和 scoped 属性的介绍| 学习笔记