原生javascript获取元素样式


Posted in Javascript onDecember 31, 2014

摘要:
    我们在开发过程中经常会遇到通过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;

 }
Javascript 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
小程序自定义轮播图圆点组件
Jun 25 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 #Javascript
jQuery中:last-child选择器用法实例
Dec 31 #Javascript
jQuery中:nth-child选择器用法实例
Dec 31 #Javascript
jQuery中:first-child选择器用法实例
Dec 31 #Javascript
jQuery中复合属性选择器用法实例
Dec 31 #Javascript
javascript实现左右控制无缝滚动
Dec 31 #Javascript
javascript比较两个日期的先后示例代码
Dec 31 #Javascript
You might like
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
详解数组Array.sort()排序的方法
2020/05/09 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
Python中字符串List按照长度排序
2019/07/01 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
2014年公司庆元旦活动方案
2014/03/05 职场文书
初中班级口号
2014/06/09 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
小学庆六一活动总结
2014/08/28 职场文书
太空授课观后感
2015/06/17 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby