JS之获取样式
基本代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
color:yellow;
}
</style>
</head>
<body>
<div style="width:100px;height:100px;background-color:red">This is div</div>
</body>
</html>
1.通过使用element.style属性来获取
<script>
var div = document.getElementsByTagName("div")[0];
console.log(div.style.color); //""
console.log(div.style.backgroundColor); //red
</script>
element.style属性只能获取行内样式，不能获取<style>标签中的样式，也不能获取外部样式
由于element.style是元素的属性，我们可以对属性重新赋值来改写元素的显示。
<script>
var div = document.getElementsByTagName("div")[0];
div.style['background-color'] = "green";
console.log(div.style.backgroundColor); //green
</script>
2.通过getComputedStyle和currentStyle来获取样式
getComputedStyle的使用环境是chrome/safari/firefox IE 9,10,11
<script>
var div = document.getElementsByTagName("div")[0];
var styleObj = window.getComputedStyle(div,null);
console.log(styleObj.backgroundColor); //red
console.log(styleObj.color); //yellow
</script>
currentStyle在IE里能得到完美支持，chrome不支持，ff不支持
<script>
var div = document.getElementsByTagName("div")[0];
var styleObj = div.currentStyle;
console.log(styleObj.backgroundColor); //red
console.log(styleObj.color); //yellow
</script>
3.ele.style和getComputedStyle或者currentStyle的区别
3.1 ele.style是读写的，而getComputedStyle和currentStyle是只读的
3.2 ele.style只能得到行内style属性里面设置的CSS样式，而getComputedStyle和currentStyle还能得到其他的默认值
3.3 ele.style得到的是style属性里的样式，不一定是最终样式，而其他两个得到的是元素的最终CSS样式
4.获取样式兼容性写法
<script>
//获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名
function getStyle(obj,attr){
//针对IE
if(obj.currentStyle){
return obj.currentStyle[attr]; //由于函数传过来的attr是字符串，所以得用[]来取值
}else{
//针对非IE
return window.getComputedStyle(obj,false)[attr];
}
}
/*
获取或者设置css属性
*/
function css(obj,attr,value){
if(arguments.length == 2){
return getStyle(obj,attr);
}else{
obj.style[attr] = value;
}
}
</script>
5.window.getComputedStyle(ele[,pseudoElt]);
第二个参数如果是null或者省略，则获取得到是ele的CSSStyleDeclaration对象
如果是一个伪类，则获取到的是伪类的CSSStyleDeclaration对象
<style>
div{
width:200px;
height:200px;
background-color:#FC9;
font-size:20px;
text-align:center;
}
div:after{
content:"This is after";
display:block;
width:100px;
height:100px;
background-color:#F93;
margin:0 auto;
line-height:50px;
}
</style>
<body>
<div id='myDiv'>
This is div
</div>
<input id='btn' type="button" value='getStyle'/>
<script>
var btn = document.querySelector('#btn');
btn.onclick = function(){
var div = document.querySelector('#myDiv');
var styleObj = window.getComputedStyle(div,'after');
console.log(styleObj['width']);
}
</script>
</body>
6.getPropertyValue获取CSSStyleDeclaration对象中的指定属性值
<script>
var div = document.getElementsByTagName("div")[0];
var styleObj = window.getComputedStyle(div,null);
console.log(styleObj.getPropertyValue("background-color"));
</script>
getPropertyValue(propertyName);中的propertyName不能是驼峰式表示
obj.currentStyle['margin-left'] 有效
obj.currentStyle['marginLeft'] 有效
window.getComputedStyle(obj,null)['margin-left'] 有效
window.getComputedStyle(obj,null)['marginLeft'] 有效
window.getComputedStyle(obj,null).getPropertyValue('margin-left') 有效
window.getComputedStyle(obj,null).getPropertyValue('marginLeft') 无效
obj.currentStyle.width 有效
obj.currentStyle.background-color 无效
obj.currentStyle.backgroundColor 有效
window.getComputedStyle(obj,null).width 有效
window.getComputedStyle(obj,null).background-color 无效
window.getComputedStyle(obj,null).backgroundColor 有效
综上，就是带有"-"的属性不能直接点出来，所以有getPropertyValue方法来处理，但是可以用[]来取代getPropertyValue
7.defaultView
在许多在线的演示代码中, getComputedStyle 是通过 document.defaultView 对象来调用的。 大部分情况下，这是不需要的， 因为可以直接通过window对象调用。但有一种情况，你必需要使用 defaultView, 那是在firefox3.6上访问子框架内的样式 (iframe)
MDN--getComputedStyle:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle
JS之获取样式的更多相关文章
- js如何获取样式？
在某个项目中,我们经常会需要来获取某个元素的样式,比如说获取一个div的color:这样,新的问出现了, var style = box.style.width;console.log(style); ...
- js中获取样式的俩种方法 style.color和style['color'] 区别
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js中获取css的样式
因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj ...
- 原生js获取样式
js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- 为什么我获取不到这个css样式？js原生获取css样式总结
还是自己遇到的一个坑的总结吧!与其说是坑不如说自己学艺不精,让我先哭一会!! 需求 简单就是获取一个css的height (好吧 就是一个这么简单的需求) 实践 好吧 长时间的JQ 我已经对原生无能了 ...
- JS获取样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题
style设置/获取样式的问题:1.js通过style方法 --加样式:加的是行间样式 oDiv.style.width="20"+'px'; --取样式:取得是行间样 ...
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
随机推荐
- Linux下使用vim的tips
1.如果用户不能确定vi所处的状态,可以按Esc键两次返回初始状态. 2.Fedora 17下安装与配置ssh:http://blog.csdn.net/ashuai81/article/detail ...
- 【原】iOS学习之Swift之语法2(精简版)
1.可选类型和强制解包(?和!) 1> 可选类型(?)和强制解包(!) 在swift中,可选类型(?) 其根源是一个 枚举型,里面有 None 和 Some 两种类型.其实所谓的 nil 就是 ...
- BZOJ2164 : 采矿
树链剖分+线段树,每个节点维护以下信息: (1)单独在某个点分配$i$个人的最大收益.可以$O(m)$合并. (2)分配$i$个人的最大收益.可以用$O(m^2)$合并. 时间复杂度$O(c(m^2\ ...
- android 第三方 Im
1.阿里百川 单聊.群聊.客服能力集成,仅需花费4小时,不收费,0成本接入,让App轻松拥有沟通能力,历经多次双十一考验,消息到达率100%,全年可用性高达99.99%,登录异常提醒,木马钓鱼网站监测 ...
- ACM cigarettes
cigarettes 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 Tom has many cigarettes. We hypothesized that he ...
- 【BZOJ】2078: [POI2004]WYS
题意: 给n个互不相交的多边形(边均平行于坐标轴),问最大深度.深度的定义是,若多边形A被多边形B包含,则\(dep[A]=max(dep[B])+1\).坐标系的深度为0.(n<=40000, ...
- 【BZOJ】2157: 旅游
http://www.lydsy.com/JudgeOnline/problem.php?id=2157 题解:裸lct不解释.. #include <bits/stdc++.h> usi ...
- C语言（2）
C语言(2)---变量 基本格式: 变量类型 变量名1[,变量名2,变量名3,...变量名n]: 注意: 1.在C语言中如果申请一个变量,里面存放小数,则用float表示,且在输出时需要注意prin ...
- Maven_非法字符: '\ufeff' 解决方案
Idea在maven打包时报非法字符: '\ufeff' ,但打开报错的类看没有问题,后来发现是隐蔽字符BOM的问题,解决办法是用Notepad++打开这个类,然后改变编码格式为UTF-8 无DOM ...
- Application Initialization Module for IIS 7.5
http://www.iis.net/downloads/microsoft/application-initialization IIS7.5也有Warm Up功能 让ASP.NET第一次Reque ...