某某茶叶有限公司欢迎您!
金沙棋牌在线 > 服务器&运维 > 原生javascript获取元素样式_javascript技巧_脚本之家

原生javascript获取元素样式_javascript技巧_脚本之家

时间:2019-11-27 20:39

所以, 我们得利用IE的currentStyle和W3C的getPropertyValue获取. elem.style.attr获取样式的方法就不说了. 先来看currentStyle方法, 此对象ie专属, 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式. IE下通过它, 就可以获取元素的Css属性值. 而针对其他标准浏览器, W3C也提供了一个方法getPropertyValue, 此方法, 稍有点复杂, 首先要通过document.defaultView.getComputedStyle获得Css的样式对象, 然后通过该对象的getPropertyValue获取属性值. 上述两种方法, 无论IE还是W3C的, 有一点是相同的, 它们所获取的是元素Css属性最终值. 这一点与Css的优先级是相同的. 有一点不同的是, IE的方法是通过Css属性的驼峰式名获取, 而W3C的方法是通过元素Css原来的属性名获取的, 所以, 在使用W3C方法时, 需要对Css属性名做个简单的处理. 基于此, 我们可以封装一个获取元素属性值的方法, 如下: 复制代码 代码如下: function attrStyle{ if{ //若样式存在于html中,优先获取 return elem.style[attr]; }else if{ //IE下获取CSS属性最终样式 return elem.currentStyle[attr]; }else if(document.defaultView && document.defaultView.getComputedStyle){ //W3C标准方法获取CSS属性最终样式 //注意,此法属性原格式获取的,故要转换一下 attr=attr.replace.toLowerCase(); //获取样式对象并获取属性值 return document.defaultView.getComputedStyle.getPropertyValue; }else{ return null; } } 记得精通JavaScript一书中获取元素位置那一节, 有获取元素样式属性值更详细的解释. 第一次知道document.defaultVies.getComputedStyle就是从这本书来的. 很棒的一本书, 有兴趣的朋友话一定要看看. 原方发布于Mr.Think的博客:

摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class。现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置

Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(

在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来。

hello

1、ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值。这是因为ele.style只能获取写在元素标签中的style属性里的样式值,无法获取到定义在

),可以直接使用element.style.color来直接获取css属性的值; 2. 但是对于外部定义的css样式使用这种方式就无法获取了,而且IE浏览器和其他标准浏览器(Firefox,Chrome,Opera,Safari)使用的方法不一样,IE浏览器使用element.currentStyle,W3C标准浏览器使用getComputedStyle来获取。

和通过加载进来的样式属性

  1. IE获取元素外部定义的CSS属性值: element.currentStyle currentStyle对象返回了元素上的样式表,但是style对象只返回通过style标签属性应用到元素的内嵌样式。 因此,通过currentStyle对象获取的样式值可能与通过style对象获取的样式值不同。 例如,如果段落的color属性值通过链接或嵌入样式表设置为红色,而不是内嵌的话,对象.currentStyle.color 将返回正确的颜色,而对象style.color不能返回值。但是,如果用户指定了