兼容的获取样式的函数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:只能 ...
随机推荐
- android studio 升级到3.3.1后，提示程序包不存在
android studio 升级到3.3.1后,提示程序包不存在 原因 主Module--A 引用了其他Moduel--B里的jar库, 只需要把B的dependencies改成如下(implent ...
- PowerShell ISE：Windows Server 2008 R2默认不安装
PowerShell ISE:Windows Server 2008 R2默认不安装,需要手动安装,在PowerShell运行如下两段脚本: Import-Module ServerManager A ...
- Open Source 开发工具集
Open Source 开发工具集 转自:http://www.linuxforum.net原作者:gogoliu(Pooh-Bah) 编辑器: vi:老牌编辑器,在各个unix和unix-like平 ...
- 【Oracle】ORA-14400: 插入的分区关键字未映射到任何分区
问题描述: 工作中使用kettle将原始库中的数据抽取到标准库中,在抽取过程中报错:[ORA-14400: 插入的分区关键字未映射到任何分区]/[ORA-14400: inserted partiti ...
- System.DllNotFoundException: Unable to load DLL 'libgdiplus': The specified module could not be found.
netcore 使用System.Drawing 出现如下错误: Unhandled Exception: System.TypeInitializationException: The type i ...
- Android memory dump
1.读取指定pid和内存地址的字符: #include <stdlib.h> #include <stdio.h> #include <string.h> #inc ...
- Solr4.7.0连接PostgreSQL
1.把PostgreSQL的Jar包 例如:postgresql-9.1-901-1.jdbc4.jar 或其他版本 放到D:\apache-tomcat-7.0.57\webapps\solr\ ...
- c# 简单方便的连接oracle方式
通过nuget安装ManagedDataAccess (自动生成的config里面的配置都可以删掉) winform程序,拖出一个datagridview和button using Oracle.Ma ...
- Linux系统编程——Daemon进程
目录 Daemon进程介绍 前提知识 Daemon进程的编程规则 Daemon进程介绍 Daemon运行在后台也称作"后台服务进程". 它是没有控制终端与之相连的进程.它独立与控制 ...
- [UE4]抓取准备
一.引擎的VR实例工程是使用手柄进行抓取的.我们需要加上可以使用鼠标进行抓取操作. 二.将左右手保存到全局变量. 三.左右手分别调用抓取和扔方法