HTML5学堂:JavaScript可以用style对象给标签设置样式、获取样式,但是利用style对象获取的样式只能是标签内联的样式,今天要给大家讲解的是利用currentStyle对象与getComputedStyle方法来获取浏览器计算后的样式。
要检测标签的样式有包含在头部书写样式、标签内联样式和外部的样式,即浏览器计算后的样式。
element用于计算样式的标签;pseudoElt可选指定一个伪元素进行匹配。对于常规的元素来说可省略。
window.getComputedStyle(element[, pseudoElt])方法获取标签在浏览器里计算的样式。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
.btn {
width: 100px;
}
.btn:after {
display: block;
width: 20px;
height: 20px;
background-color: red;
content: ".";
}
</style>
</head>
<body>
<div class="btn" id="con">HTML5学堂:刘国利、陈能堡</div>
<script>
var box = document.getElementById("con");
box.style.height = "1000px";
// 获取标签浏览器计算后的样式
console.log(window.getComputedStyle(box, null).getPropertyValue("height"));
console.log(window.getComputedStyle(box, null).getPropertyValue("width"));
// 获取伪元素浏览器计算后的样式
console.log(window.getComputedStyle(box, "after")["content"]);
console.log(window.getComputedStyle(box, "after")["background-color"]);
// 注意:getComputedStyle(box, null).getPropertyValue("height")等价于getComputedStyle(box, null)["height"]
</script>
</body>
</html>
关于defaultView
在许多JavaScript框架, getComputedStyle是通过 document.defaultView 对象来调用的。 大部分情况下,这是不需要的,因为可以直接通过window对象调用。但有一种情况,你必需要使用 defaultView, 那是在火狐3.6上访问子框架内的样式 (iframe)——资料来源mozilla
jQuery部分源代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
.btn {
width: 100px;
}
.btn:after {
display: block;
width: 20px;
height: 20px;
background-color: red;
content: ".";
}
</style>
</head>
<body>
<div class="btn" id="con">HTML5学堂:刘国利、陈能堡</div>
<script>
var box = document.getElementById("con");
box.style.height = "1000px";
// 获取标签浏览器计算后的样式
console.log(document.defaultView.getComputedStyle(box, null).getPropertyValue("height"));
console.log(document.defaultView.getComputedStyle(box, null).getPropertyValue("width"));
// 获取伪元素浏览器计算后的样式
console.log(document.defaultView.getComputedStyle(box, "after")["content"]);
console.log(document.defaultView.getComputedStyle(box, "after")["background-color"]);
</script>
</body>
</html>
从上面可以看出IE6~8不支持getComputedStyle该方法,利用currentStyle对象处理兼容咯~
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style>
.btn {
width: 100px;
}
.btn:after {
display: block;
width: 20px;
height: 20px;
background-color: red;
content: ".";
}
</style>
</head>
<body>
<div class="btn" id="con">HTML5学堂:刘国利、陈能堡</div>
<script>
var box = document.getElementById("con");
box.style.height = "1000px";
// 获取标签浏览器计算后的样式
console.log(box.currentStyle["width"]);
console.log(box.currentStyle["height"]);
// 注意:获取伪元素浏览器计算后的样式——该对象不支持
</script>
</body>
</html>
/*
* 功能:获取渲染后标签的样式,element是标签的对象,property是标签样式属性值
* 参数:element是元素对象,property是样式属性
* demo:getStyle(move, "marginLeft");
* author:HTML5学堂
*/
function getStyle(element, property){
var proValue = null;
if (!document.defaultView) {
proValue = element.currentStyle[property];
} else {
proValue = document.defaultView.getComputedStyle(element)[property];
}
return proValue;
}