下面小编就为大家带来一篇原生 js 获取元素样式的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
我们在开发过程中经常会遇到通过 js 获取或者改变 DOM 元素的样式,方法有很多,比如:通过更改 DOM 元素的 class。现在我们讨论原生 js 来获取 DOM 元素的 CSS 样式,注意是获取不是设置
在开始之前先说下获取最终应用在元素上的所有 CSS 属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来。
1、ele.style
在学习 DOM 的时候就看到通过 ele.style 来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值。这是因为 ele.style 只能获取写在元素标签中的 style 属性里的样式值,无法获取到定义在 <style></style> 和通过 <link href="css.css"> 加载进来的样式属性
例子:
- var test = document.getElementById("test");
- //获取节点的color
- test.style.color;
2、getComputedStyle()
getComputedStyle 是一个可以获取当前元素所有最终使用的 CSS 属性值。
语法如下:
- window.getComputedStyle("元素", "伪类");
这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如 ":before") 。如果不需要伪元素信息,第二个参数可以是 null。也可以通过 document.defaultView.getComputedStyle("元素", "伪类"); 来使用
例子:
- var test = document.getElementById("test"),
- demo = window.getComputedStyle(test, null);
- //获取节点的color
- demo.color
注意:Firefox 和 Safari 会将颜色转换成 rgb 格式,如果 test 节点上没有任何样式,通过 style.length 来查看浏览器默认样式的个数。IE6-8 不支持该方法,需要使用下面的方法
3、ele.currentStyle
currentStyle 是 IE 浏览器自己的一个属性,其语法与 ele.style 类似,差别在于 element.currentStyle 返回的是元素当前应用的最终 CSS 属性值(包括外链 CSS 文件,页面中嵌入的 <style> 属性等)。
语法:
- var style = dom.currentStyle;
例子:
- var test = document.getElementById("test"),
- demo = test.currentStyle;
- //获取节点的color
- demo.color;
注意:对于综合属性 border 等,ie 返回 undefined,其他浏览器有的返回值,有的不返回,但是 borderLeftWidth 这样的属性是返回值的
4、getPropertyValue()
getPropertyValue 获取 CSS 样式的直接属性名称
语法如下:
- window.getComputedStyle(element, null).getPropertyValue(属性)
例子:
- var test = document.getElementById('test');
- window.getComputedStyle(test, null).getPropertyValue("background-color");
注意:属性名不支持驼峰格式,IE6-8 不支持该方法,需要使用下面的方法
5、getAttribute
getAttribute 与 getPropertyValue 类似,有一点的差异是属性名驼峰格式
例子:
- var test = document.getElementById('test');
- window.getComputedStyle(test, null).getPropertyValue("backgroundColor");
注意:该方法只支持 IE6-8
小结:
jQuery 的 CSS() 方法,其底层运作就应用了 getComputedStyle 以及 getPropertyValue 方法,当我们使用原生的 js 开发时就可以通过以上方法获取元素的值。
下面是一个兼容 ie,firefox,chrome 等浏览器的获取元素样式的方法,可以应用到项目中
- function getStyle(ele) {
- var style = null;
- if(window.getComputedStyle) {
- style = window.getComputedStyle(ele, null);
- }else{
- style = ele.currentStyle;
- }
- return style;
- }
以上这篇原生 js 获取元素样式的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0311/263761.html