原生js获取元素样式的简单方法


Posted in Javascript onAugust 06, 2016

我们在开发过程中经常会遇到通过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获取元素样式的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
extjs form textfield的隐藏方法
Dec 29 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
Jquery获取radio选中的值
May 05 jQuery
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 #Javascript
JS中对Cookie的操作详解
Aug 05 #Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 #Javascript
js实现精确到毫秒的倒计时效果
Aug 05 #Javascript
jQuery实现Select左右复制移动内容
Aug 05 #Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 #Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 #Javascript
You might like
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
JS中showModalDialog 的使用解析
2013/04/17 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python re模块的高级用法详解
2018/06/06 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python hashlib模块加密过程解析
2019/11/05 Python
详解python tkinter 图片插入问题
2020/09/03 Python
德国自行车商店:Tretwerk
2019/06/21 全球购物
晚会开场白和结束语
2015/05/29 职场文书
请病假条范文
2015/08/17 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
golang特有程序结构入门教程
2021/06/02 Python
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis