getComputedStyle与currentStyle获取样式(style/class)
大家都知道,用document.getElementById(‘element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了。
DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距。但是事情还没完,万恶的IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle,它是作为DOM元素属性存在的,如:obj.currentStyle.paddingLeft,在IE中就获取到对象的左内边距了,兼容性的写法如下:
return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;
这样,就能在IE及FF中返回对象的当前样式信息了。
特别注意一点:如果要获取当前对象的颜色信息,IE返回的是16进制的'#ffffff',而FF返回的是rgb(255,255,255)
用js的style属性可以获得html标签的样式,但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle。下面是一个小示例:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js用currentStyle和getComputedStyle获取css样式</title> <style type="text/css"> #div1{width:100px; height:100px; background:red;} </style> <script type="text/javascript"> function getStyle(obj, attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];} } window.onload=function(){var oDiv=document.getElementById('div1');alert(getStyle(oDiv,'width')) } </script> </head> <body> <div id="div1"></div> </body> </html>
这样就可以获取到样式里的width值了。
转载于:https://www.cnblogs.com/goloving/p/6971733.html
getComputedStyle与currentStyle获取样式(style/class)相关推荐
- getComputedStyle和currentStyle的区别和用法
获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...
- getComputedStyle、currentStyle的区别与用法
获取元素CSS值之getComputedStyle方法熟悉 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinx ...
- js获取css值的方法:style、getComputedStyle和currentStyle
JS 获取 html元素的样式有三种方式:style.getComputedStyle 和 currentStyle等.区别在于: (1)style 只能获取行间样式,但能设置样式. (2)getCo ...
- javascript中style与getComputedStyle()与currentStyle()的异同。
首先讨论这个问题我们先来看看样式的三种形式:内联样式,内部样式,外部样式 三种样式的优先级:内联样式>内部样式>外部样式 外部样式就是我们通过link标签将外部样式表引入的样式,而,而我们 ...
- getComputedStyle currentStyle 获取当前元素所有最终使用的CSS属性值
object.getComputedStyle 获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象,只读,不能设置. 此方法不兼容IE8及以下,需用currentStyle方法. ...
- JavaScript获取样式值的几种方法学习总结
本人经过整理总结出以下获取样式值的方法,如有错误请各位大佬指正. 有四种方法:style,currentStyle,getComputedStyle,rules 与 cssRules方法. 1. st ...
- JS getComputedStyle() 与 currentStyle
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...
- getComputedStyle与currentStyle
本文参考https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle 1.简介 getComputedStyle是w ...
- js修改伪元素的属性、styleSheets获取样式表,Failed to read the 'cssRules' property from 'CSSStyleSheet' Cannot acces
登录验证中的判断逻辑 1.提示输入用户,输入8 - 16位密码2.检验输入用户名和密码是否正确 用户名不允许空格,任何字符数字都行,不允许为空 密码8-16位,不允许空格 ,小于8位给出提示 密码必须 ...
最新文章
- springboot + shiro 验证码与记住登录
- JDBC 实例--JDBC通过工具类DBUtil连接到数据库,让我们不再恐惧操作数据库
- 算法导论系列:分治算法
- 图像 pipeline_多面体优化,Pipeline与深度学习编译器
- WPF数据驱动应用程序上具有通用Lambda表达式的筛选器模式
- Reids Lua 模糊查询所有key 及 相对应的集合总数
- 小企业环境中磁带备份和恢复的利与弊
- css画饼状图圆形,CSS样式圆形饼图百分比
- Trust Region Policy Optimization (TRPO) 背后的数学原理
- 信息安全工程师(中级)—重要知识点总结
- 怎么看接收灵敏度desense问题?
- 文件没保存怎么恢复?3种方法恢复未保存office文档
- 儿童自行车品牌推荐全球十大儿童山地自行车品牌排行榜
- 让电视走向高端化,创维能否继续领跑显示行业?
- 退款java_APP支付 + 退款(JAVA实现)
- Linux 管道通信
- 从前慢-Shiro和JWT
- 华为hn–wx9x笔记本电脑_华为荣耀9x多少钱 华为和荣耀笔记本差别
- 如何解除病毒对各种杀毒软件的劫持
- text/css什麼意思