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 事件队列调整方法
Sep 18 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
jquery.validate使用详解
Jun 02 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
前端面试知识点目录一览
Apr 15 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
详解Node.JS模块 process
Aug 31 Javascript
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
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php中stdClass的用法分析
2015/02/27 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python实现的随机森林算法与简单总结
2018/01/30 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
python实现电子书翻页小程序
2019/07/23 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
python中xlrd模块的使用详解
2021/02/01 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
linux下进程间通信的方式
2013/01/23 面试题
百度软件工程师职位
2013/02/14 面试题
英文自荐信格式
2013/11/28 职场文书
玲玲的画教学反思
2014/02/04 职场文书
趣味比赛活动方案
2014/02/15 职场文书
活动总结的格式
2014/05/07 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
新农村建设汇报材料
2014/08/15 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
舞出我人生观后感
2015/06/16 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
python编写五子棋游戏
2021/05/25 Python
基于tensorflow权重文件的解读
2021/05/26 Python
新手初学Java网络编程
2021/07/07 Java/Android