原生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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
浅析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
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jquery图片切换插件
2015/03/16 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
基于javascript实现放大镜特效
2020/12/03 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Python range与enumerate函数区别解析
2020/02/28 Python
python 实现单例模式的5种方法
2020/09/23 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
Python项目打包成二进制的方法
2020/12/30 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
校车安全管理责任书
2015/05/11 职场文书
交通肇事罪辩护词
2015/05/21 职场文书