原生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 相关文章推荐
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
总结js函数相关知识点
Feb 27 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 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
PHP include任意文件或URL介绍
2014/04/29 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python判断字符串是否纯数字的方法
2014/11/19 Python
深入理解Python装饰器
2016/07/27 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
结构工程研究生求职信
2013/10/13 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
公益广告标语
2014/06/19 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
会计工作检讨书
2015/02/19 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
2016年元旦致辞
2015/08/01 职场文书
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js