原生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 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 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代码
2007/03/03 PHP
php 获取完整url地址
2008/12/20 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
javascript分页代码(当前页码居中)
2012/09/20 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
Python专用方法与迭代机制实例分析
2014/09/15 Python
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python如何生成网页验证码
2018/07/28 Python
python虚拟环境迁移方法
2019/01/03 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
对python中的装包与解包实例详解
2019/08/24 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
Ratchet 模态框的实现
2020/08/19 HTML / CSS
EJB与JAVA BEAN的区别
2016/08/29 面试题
平面设计岗位职责
2013/12/14 职场文书
文明寝室申报材料
2014/05/12 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
清洁员岗位职责
2015/02/15 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
SQL之各种join小结详细讲解
2021/08/04 MySQL
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python