兼容的获取样式的函数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:只能 ...
随机推荐
- 2、Linux安装jmeter
1.下载地址 http://jmeter.apache.org/download_jmeter.cgi 2.选择下载,本地选择,Source版会比较坑 3.安装jdk8,过程省略,可参考:https: ...
- python requests 请求禁用SSL警告信息解决
Python3 requests模块发送HTTPS请求,关闭SSL 验证,控制台会输出以下错误: InsecureRequestWarning: Unverified HTTPS request is ...
- Spring Boot - AOP（面向切面）-切入点表达式
切入点指示符用来指示切入点表达式目的,在 Spring AOP 中目前只有执行方法这一个连接点,Spring AOP 支持的 AspectJ 切入点指示符,切入点表达式可以使用 &&. ...
- siftflow-fcn32s训练及预测
一.说明 SIFT Flow 是一个标注的语义分割的数据集,有两个label,一个是语义分类(33类),另一个是场景标签(3类). Semantic and geometric segmentatio ...
- 带宽怎么算---Gbit/s
带宽怎么算---Gbit/s 信息来源: 计算方法: 带宽的实际应用:
- sort简单用法
-u 去重## 查看文件内容cat test_sort.txt ## sort -u 去重cat test_sort.txt |sort -u----------------------------- ...
- 双网卡单IP实现网卡冗余与负载均衡
WINDOWS下: 所谓双网卡,就是通过软件将双网卡绑定为一个IP地址,这个技术对于许多朋友来说并不陌生,许多高档服务器网卡(例如intel8255x系列.3COM服务器网卡等)都具有多网卡绑定功能, ...
- 1.编写一个shell脚本
一.shell和shell脚本 在linux系统下,以 #/bin/bash开头的文本会被shell解释器进行解释. shell是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操 ...
- linux中开启snmp协议
1.安装软件#yum -y install net-snmp 2.修改配置文件#vim /etc/snmp/snmpd.conf确保snmpd.conf文件中包含以下绿色内容:com2sec notC ...
- 2018-2019-2 20165312《网络攻防技术》Exp3 免杀原理与实践
2018-2019-2 20165312<网络攻防技术>Exp3 免杀原理与实践 课上知识点总结 1.恶意软件检测机制 基于特征码的检测(需要定期更新病毒库) 启发式恶意软件检测(实时监控 ...