您的位置：首页 > 其它

currentStyle和getComputedStyle的兼容写法

2015-07-13 21:00 369 查看

今天学习javascript的时候，教程中介绍了一种简单实现jQuery 中css()方法的写法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<input type="button" value="样式" id="btn">
<div id="div"></div>
<script>
function css(obj, attr, value) {
if (arguments.length === 2) {
return obj.currentStyle[attr];
} else if(arguments.length === 3){
obj.style[attr] = value;
}
}
window.onload = function (){
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("div");

oBtn.onclick = function () {
css(oDiv, 'background', 'green');
console.log(oDiv.currentStyle.width);
// console.log(getComputedStyle(oDiv, false).width);
}
}
</script>
</body>
</html>

然而当我用chrome浏览器测试的时候，浏览器却抛出了一个错误

Uncaught TypeError: Cannot read property 'width' of undefined

于是马上联想到这必定又是浏览器大战中留下来的兼容问题，于是小白开始上网搜索，总结如下：

currentStyle：获取计算后的样式，也叫当前样式、最终样式。

　　优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。
　　注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。

　　非常遗憾的是，这个好使的东西也不能被各大浏览器完美地支持。准确地说，在我测试的浏览器中，IE8和Opera 11弹出了“object CSSStyleDeclaration”；FF 12、chrome 14则弹出“undefined”。

　　虽然currentStyle无法适用于所有浏览器，但是可以根据以上测试的结果来区分开支持、不支持的浏览器，然后再找到兼容的写法。

其实在FF浏览器中我们可以使用getComputedStyle(obj,false)来达到与IE下currentStyle相同的效果。

　　getComputedStyle(obj,false)：在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。

以下是兼容写法

　　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<input type="button" value="样式" id="btn">
<div id="div"></div>
<script>
function css(obj, attr, value) {
if (arguments.length === 2) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}

} else if(arguments.length === 3){
obj.style[attr] = value;
}
}
window.onload = function (){
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("div");

oBtn.onclick = function () {
css(oDiv, 'background', 'green');
console.log(css(oDiv, 'width'));
// console.log(getComputedStyle(oDiv, false).width);
}
}
</script>
</body>
</html>

不支持currentStyle的三款浏览器(FF、chrome、safari)，都是支持getComputedStyle的。

　　

<script>
// 哪个元素
// 哪个样式
function getStyle(obj, attr) {
var style;
if (obj.currentStyle) {
style = obj.currentStyle[attr];
} else{
style = getComputedStyle(obj, false)[attr];
}
return style;
}
window.onload = function (){
var oDiv = document.getElementById("box");
console.log(getStyle(oDiv, 'backgroundColor'));
}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航