原生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 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
Json解析的方法小结
Jun 22 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
Element Input组件分析小结
Oct 11 Javascript
微信小程序实现日历签到
Sep 21 Javascript
js实现随机点名
Jan 19 Javascript
微信小程序 根据不同用户切换不同TabBar
Apr 21 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
自己动手做一个SQL解释器
2006/10/09 PHP
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Pytorch之Variable的用法
2019/12/31 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
办公室年终个人自我评价
2013/10/28 职场文书
后勤部长岗位职责
2013/12/14 职场文书
教师实习自我鉴定
2013/12/18 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
论文答辩开场白大全
2015/05/27 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
Java使用HttpClient实现文件下载
2022/08/14 Java/Android