javascript 获取元素样式必杀技


Posted in Javascript onMay 04, 2014

Javascript获取CSS属性值方法:getComputedStyle和currentStyle

1 .对于元素的内联CSS样式(<div style="color:#369">hello</div>),可以直接使用element.style.color来直接获取css属性的值;

2. 但是对于外部定义的css样式使用这种方式就无法获取了,而且IE浏览器和其他标准浏览器(Firefox,Chrome,Opera,Safari)使用的方法不一样,IE浏览器使用element.currentStyle,W3C标准浏览器使用getComputedStyle来获取。

1. IE获取元素外部定义的CSS属性值: element.currentStyle

currentStyle对象返回了元素上的样式表,但是style对象只返回通过style标签属性应用到元素的内嵌样式。

因此,通过currentStyle对象获取的样式值可能与通过style对象获取的样式值不同。

例如,如果段落的color属性值通过链接或嵌入样式表设置为红色( red ),而不是内嵌的话,对象.currentStyle.color 将返回正确的颜色,而对象style.color不能返回值。但是,如果用户指定了 <P STYLE="color:'red'">,currentStyle和STYLE对象都将返回值 red。
currentStyle对象反映了样式表中的样式优先顺序。在 HTML 中此顺序为:

1) 内嵌样式

2) 样式表规则

3) HTML 标签属性

4) HTML 标签的内部定义

2. W3C获取元素外部定义的CSS属性值: window.getComputedStyle(element, pseudoElt)
element必选,HTML元素
pseudoElt必选,获取该元素的伪类样式

function getStyle(node, property){ 
if (node.style[property]) { 
return node.style[property]; 
} 
else if (node.currentStyle) { 
return node.currentStyle[property]; 
} 
else if (document.defaultView && document.defaultView.getComputedStyle) { 
var style = document.defaultView.getComputedStyle(node, null); 
return style.getPropertyValue(property); 
} 
return null; 
}
Javascript 相关文章推荐
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
javascript中常用编程知识
Apr 08 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
javascript操作excel生成报表全攻略
May 04 #Javascript
javascript如何使用bind指定接收者
May 04 #Javascript
用jquery.sortElements实现table排序
May 04 #Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 #Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 #Javascript
javascript实现2048游戏示例
May 04 #Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 #Javascript
You might like
计数器详细设计
2006/10/09 PHP
php简单分页类实现方法
2015/02/26 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
js 表格隔行颜色
2009/12/02 Javascript
Exjs 入门篇
2010/04/07 Javascript
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
JavaScript字符串对象
2017/01/14 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python 私有函数的实例详解
2017/09/11 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
pandas DataFrame运算的实现
2020/06/14 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
super关键字的用法
2012/04/10 面试题
C语言笔试集
2012/07/24 面试题
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
总经理任命书范本
2014/06/05 职场文书
新农村建设标语
2014/06/24 职场文书
故宫导游词
2015/01/31 职场文书
保研推荐信格式
2015/03/25 职场文书
大学生求职意向书
2015/05/11 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
小学英语教学反思范文
2016/02/15 职场文书
导游词之吉林花园山
2019/10/17 职场文书
PHP正则表达式之RCEService回溯
2022/04/11 PHP