原生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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
vue v-model动态生成详解
Jun 30 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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
Yii遍历行下每列数据的方法
2016/10/17 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
nodejs基础知识
2017/02/03 NodeJs
写jQuery插件时的注意点
2017/02/20 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python中的各种装饰器详解
2015/04/11 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
python批量图片处理简单示例
2019/08/06 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
附答案的Java面试题
2012/11/19 面试题
介绍一下如何优化MySql
2016/12/20 面试题
运动员获奖感言
2014/08/15 职场文书
会计工作检讨书
2015/02/19 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python