兼容的获取样式的函数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:只能 ...
随机推荐
- SpringMVC的HandlerMapping(处理器映射器)
SpringMvc有四种HandlerMapping:BeanNameUrlHandlerMapping ,SimpleUrlHandlerMapping,ControllerClassNameHan ...
- jquery: 获取当前天加减一天
// 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占 ...
- 生成用于ROM初始化的coe文件---使用matlab
生成用于ROM初始化的coe文件---使用matlab t=0:2*pi/2^12:2*pi; y=0.5*sin(t)+0.5; r=ceil(y*(2^8-1)); fid = fopen('si ...
- ASP.NET页面跳转的三大方法详解
ASP.NET页面跳转有什么方法呢?,现在给大家介绍三种方法,他们的区别是什么呢?让我们开始吧: ASP.NET页面跳转1.response.redirect 这个跳转页面的方法跳转的速度不快,因为它 ...
- UC登录功能：商户需要创建的表
1:类似PHP的hash_hmac DELIMITER ;; CREATE DEFINER=`root`@`%` FUNCTION `uc_session_hmacsha1`( `_secretkey ...
- 实现mypwd和mybash
一.pwd 1.学习pwd命令 man pwd查看pwd功能 可以得知pwd功能是打印当前目录 2.研究pwd实现需要的系统调用(man -k; grep),写出伪代码 (1)man -k direc ...
- Qt文件系统之QFile
QFile文件操作 文件打开方式: QIODevice::NotOpen 0x0000 设备不打开.QIODevice::ReadOnly 0x0001 设备 以只读的方式打开.Q ...
- 完成端口IOCP详解
修改自: http://blog.csdn.net/piggyxp/article/details/6922277 ps: 原作者很厉害了, 把一个iocp模型讲解的这么形象,不过在实践过程中发现一些 ...
- [trouble] error connecting to master 'repl@192.168.1.107:3306' - retry-time: 60 retries: 86400
本文转自https://www.cnblogs.com/hellotracy/articles/5183057.html因为碰到同样的问题所以记录下. 很多时候,就算thread 正在进行,也不代表没 ...
- Shiro简介——《跟我学Shiro》
地址: http://jinnianshilongnian.iteye.com/blog/2018936