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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
Js切换功能的简单方法
Nov 23 Javascript
jQuery基础知识小结
Dec 22 Javascript
jquery操作select方法汇总
Feb 05 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
JavaScript无操作后屏保功能的实现方法
Jul 04 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 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 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP $_FILES函数详解
2011/03/09 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
斜45度寻路实现函数
2009/08/20 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
python中format()函数的简单使用教程
2018/03/14 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
项目采购员岗位职责
2014/04/15 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
主持稿开场白
2015/06/01 职场文书
三八妇女节新闻稿
2015/07/17 职场文书