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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 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
php 判断服务器操作系统的类型
2014/02/17 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
Python检测QQ在线状态的方法
2015/05/09 Python
python 字符串和整数的转换方法
2018/06/25 Python
Python OS模块实例详解
2019/04/15 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
python批量处理文件或文件夹
2020/07/28 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
学习方法演讲稿
2014/05/10 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
单位单身证明样本
2014/10/11 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
公证书格式
2015/01/23 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS