是这样的,一开始需要获取某一个元素的 left 值,我就用 ele.style.left 去获取了(基础不扎实还好意思来丢人),然后居然返回的是空。
好吧,追本溯源,问题的根源以及区别就在这里了。
所以,我那样是获取不到某一个元素的一个其他方式设置的样式属性值的,所以我就打算谷歌一下别的方法了。
特点:
- 只可读,但是可以读取所有的样式属性值。但是不能通过该方法去设置样式属性值。
currentStyle 获取的是一个元素的所有的样式属性值,这一点功能是与 getComputedStyle() 一样的,但是在获取某一个具体的属性的时候,可以结合 getAttribute 来实现。
和 getComputedStyle 方法不同的是,currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性,那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值,就必须将属性名转为驼峰形式。 ( 感谢这篇文章。 )
关于 getComputedStyle 返回的值,具体查看这里。
不管你最初定义的样式是什么,涉及到宽度高度之类的,返回的都是最后实际使用的宽度和高度。
关于 ele.style 的返回值,是和定义的样式的值相等的,如果设置为auto,就直接返回auto。
然后是元素的高宽,对于一个没有设定高宽的元素而言,在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值,当然我们希望在 IE 下也返回 px 值。
这里的 HACK 方法是使用 element.getBoundingClientRect() 方法。
element.getBoundingClientRect() -- 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ,通过计算就可以容易地获得准确的元素大小。
参考链接 chokcoco的博客园
用jquery可以很轻松的取到了,比如:<div id="divTest" style="height:100px"></div>
只需要:
$("div#divTest").css("height")就可以取到height的值了。
有用的话要采纳哟!
定义一个id="flower"的div元素 并设置如上样式,目标就是通过javascript来获取样式的最终属性 ;<div id="flower" >...</div>
getStyle函数:
这里用到了三个原型扩展
String.prototype.capitalize 这个方法是让字符串首字母大写
Array.prototype.contains 判断数组中是否有指定成员
String.prototype.camelize 这个是让"font-size" 字符串转换成 "fontSize" 这样的格式用来获取样式。