兼容的获取样式的函数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:只能 ...
随机推荐
- LOJ 2547 「JSOI2018」防御网络——思路+环DP
题目:https://loj.ac/problem/2547 一条树边 cr->v 会被计算 ( n-siz[v] ) * siz[v] 次.一条环边会被计算几次呢?于是去写了斯坦纳树. #in ...
- Http数据协商
一.定义: 客户端发送给服务端请求的时候,声明拿到的数据格式以及相关的限制.服务端根据请求做出判断,返回相应的数据. 二.分类 1.请求 Accept : 想要的的数据类型 Accept-Encodi ...
- 多态，封装，反射，类内置attr属性，os操作复习
1.多态 #多态 多态是指对象如何通过他们共同的属性和动作来操作及访问,而不需要考虑他们具体的类 运行时候,多种实现 反应运行时候状态 class H2O: def __init__(self,nam ...
- Unix即IDE
前言 在图形界面下大家都想要这种能够集成在一起的工具,那是因为这类窗口应用除了用复制粘贴,没有别的方法使他们更好地协同工作,它们缺失一种 共用接口(common interface) . 有关这个问题 ...
- problem: 记一次聊天框的表情包弹框不显示的找问题过程
左边是列表,包含了群和成员,右侧是聊天窗口.点击群列表,右侧显示群聊窗口,点击学员,右侧显示私聊窗口. 群聊窗口和私聊窗口是不同的组件,但是窗口中的子组件,例如窗口的头部.中间内容部分.输入框都是复用 ...
- 发布一个PHP包到Packagist, 然后使用Composer安装
Composer 能够方便的进行项目的依赖管理, 当我们发布一个包并且希望别人通过Composer安装的时候, 就需要将包发布到Composer的包仓库Packagist上面. 下面进行详细的说明一 ...
- 二、初步认识springBoot的pom.xml
1. 大体结构 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www. ...
- Windows 2012 安装 SQL Server 2012,.Net Framework 3.5安装不成的解决办法
This behavior can also be caused by a system administrator who configures the computer to use Window ...
- 刘志梅201771010115.《面向对象程序设计（java）》第十四周学习总结
实验十四 Swing图形界面组件 实验时间 20178-11-29 1.实验目的与要求 (1)设计模式:反复使用.经过分类编目的.代码设计经验的总结. 在Alexander的模式分类和软件模式的分类 ...
- Cesium学习网址
不错的案例介绍: 根据地形瓦片直接绘制高程.坡度及等高线 同一场景下显示两个不同的瓦片图层 https://cloud.tencent.com/developer/article/1113355 绘制 ...