兼容的获取样式的函数getStyle()
想要得到某个元素的某个样式属性，可以用：
<div id="div01" style="color:red">123</div>
var ele = document.getElementById("div01");
console.log(ele.style.color);
但这样只能得到写在元素上的行内样式，对于link进来的样式文件或<style></style>中写的样式是获取不到的。
标准浏览器提供了一个getComputedStyle函数，具体用法是:
// 第一个参数为要获取样式的节点，第二个参数为伪类，如:hover，如果没有就填false或null.返回CSSStyleDeclaration对象；
window.getComputedStyle(element,伪类) //可以通过属性名来获得需要的样式，下面就得到了元素的字体颜色
window.getComputedStyle(ele,false)["color"];
可IE不支持，但它提供了一个currentStyle对象，得到的结果和getComputedStyle差不多
// IE下通过这种方式也可以得到元素的字体颜色
ele.currentStyle["color"];
综合上面的情况，我们做一下兼容便可以得到靠谱的解决方法！
function getStyle(ele,name){
if (ele.currentStyle) { // IE下的处理
return ele.currentStyle[name];
} else { // 标准浏览器处理
return getComputedStyle(ele, false)[name];
}
}
再去获取div01的样式的时候就很方便了！
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
#div01{font-size:16px;}
</style>
</head>
<body>
<div id="div01" style="color:red">123</div>
<script>
function getStyle(ele,name){
if (ele.currentStyle) {
return ele.currentStyle[name];
} else {
return getComputedStyle(ele, false)[name];
}
} var ele = document.getElementById("div01"); console.log(getStyle(ele,"color")); // rgb(255, 0, 0)
console.log(getStyle(ele,"fontSize")); // 16px </script>
</body>
</html>
兼容的获取样式的函数getStyle()的更多相关文章
- js如何获取样式？
在某个项目中,我们经常会需要来获取某个元素的样式,比如说获取一个div的color:这样,新的问出现了, var style = box.style.width;console.log(style); ...
- （转载）记录函数 getStyle() 获取元素 CSS 样式
设置元素(element)的css属性值可以用element的style属性,例如要将element的背景色设置为黑色,可以这么做: element.style.backgroundColor = ' ...
- getstyle() 获取样式
问题:在js动画中,如果元素设置了border,padding等,获取到的样式是盒子的样式,这样会影响动画的正常显示. 解决方案一:在元素的行内添加样式 如 <div style=" ...
- style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题
style设置/获取样式的问题:1.js通过style方法 --加样式:加的是行间样式 oDiv.style.width="20"+'px'; --取样式:取得是行间样 ...
- 原生js获取样式
js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...
- JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、
缓动函数中opcity 写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...
- JS获取样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JS之获取样式
基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 利用原生JavaScript获取样式的方式小结
来源:http://www.ido321.com/930.html ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能 ...
随机推荐
- python selenium-webdriver 下拉菜单处理 （九）
测试过程中经常遇到下来菜单,比如说分页,每页显示的条数,以及语言的切换,很多时候经常是以下来菜单的形式展现,下面我们看一下selenium如何处理下来菜单. 首先selenium 很人性化的给提供了一 ...
- MySQL误操作删除后，怎么恢复数据？
MySQL误操作删除后,怎么恢复数据?登陆查数据库mysql> select * from abc.stad;+----+-----------+| id | name |+----+----- ...
- windows下的拷贝利器robocopy
robocopy xxcopy http://www.cnblogs.com/zhanglei1371/p/6724167.html [转载]robocopy的用法 经常进行文件管理操作的朋友们,不满 ...
- 廖雪峰Java8JUnit单元测试-2使用JUnit-2异常测试
1.异常测试 对可能抛出的异常进行测试: 异常本身是方法签名的一部分: * public static int parseInt(String s) throws NumberFormatExcept ...
- linux中.nfsxxxx引起的文件无法删除
一个linux系统中的某个文件夹无法删除,使用ls -al查看有1个.nfsxxxx的文件无法删除. 使用lsof +D /filepath/,查看到文件被一个进程一直占用. 再使用ps -aux | ...
- [UE4]计算两点距离
(Vector-Vector).VectorLength (Vector_End- Vector_Start ).Normalize,获取从起始位置指向目标位置的单位向量.
- @property的使用
1.可以将某个函数变为属性 class Name(): @property def name(self): print('xiaoming') Name().name这里name已经可以当做属性来调用 ...
- Unity Post-Processing的一些分享
讲些什么? 绝大多数的游戏或多或少都会使用些后处理效果. 早期版本中,Unity在提供的接口有限,优化空间不大,属于放任自流.官方推出了Post-Processing(下文简称PP)并在Github上 ...
- u盘辨别
1.从基座颜色上区分: USB2.0接口基座一般为黑色或者白色. USB3.0接口基座为蓝色. 2.从U盘插口针脚区分:USB 2.0是4针脚,而USB 3.0采用了9针脚,针脚比USB2.0多. 3 ...
- mysql表关联
mysql的表关联: left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录 inner ...