js-style、currentStyle与getComputedStyle()的区别

最新推荐文章于 2022-06-10 13:35:56 发布

lilly呀

最新推荐文章于 2022-06-10 13:35:56 发布

阅读量196

点赞数 1

分类专栏： JS纪录篇

本文链接：https://blog.csdn.net/qq_26780317/article/details/88695516

版权

JS纪录篇专栏收录该内容

48 篇文章 3 订阅

订阅专栏

前言：用js的style属性可以获取html标签的行间样式（oDiv.style.width），但是不能获取非行间样式；如果需要取非行间样式（不能用来设置），可以使用obj.currentStyle[attr]（IE）和getComputedStyle(obj,false)[attr](FF)来解决(然而，为了让其兼容，解决方法，封装成getStyle事件)。

一、区别

(1)style专指行间样式，即标签带style属性，例如：

<script>
    window.onload=function(){
        var oDiv=document.getElementById('div1');
        //alert("行间样式测试：" +oDiv.style.backgroundColor);
}
</script>
<div id="div1" style="width:200px;height:100px;background:red;">
这是行间样式的测试
</div>

(2)currentStyle指全局样式表、内嵌样式和HTML标签属性中指定的对象格式和样式的所有样式，currentStyle仅支持IE：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>返回值</title>
<style type="text/css">
#div1{
    width:200px;
    height:200px;
    background:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
    var oDiv=document.getElementById('div1');
    alert(currentStyle.width);
}
</script>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

(3)getComputedStyle，有两个参数，第二个参数可以为任何数，不起实质性作用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>返回值</title>
<style type="text/css">
#div1{
    width:200px;
    height:200px;
    background:red;
}
</style>
</head>
<body>
    <div id="div1"></div>  
<script type="text/javascript">
window.onload=function(){
    var oDiv=document.getElementById('div1');
    alert(getComputedStyle(oDiv,false).width);
}
</script>
</body>
</html>

currentStyle谷歌和火狐游览器可能不兼容。解决办法是：使用getComputedStyle()。Dom中getComputedStyle方法可用来获取元素中所有可用的css属性列表，以数组形式返回，并且是readonly的。IE中则用currentStyle代替。

语法：arr_style=window.getComputedStyle(elem_id,ov)

其中，ov:伪元素，是否要获取伪元素属性值。如hover,active,link等属性。如果不想获取这些伪元素的属性值请填写为null。返回值类型和style一样。

二、兼容所有游览器的写法

运用场景：知道一个div的宽高背景色，如何不通过写在行间样式的办法更改样式？currentStyle（只兼容IE），getComputedStyle(兼容FF)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>兼容所有游览器的写法</title>
<style type="text/css">
#div1 {
    width: 200px;
    height: 200px;
    background: red;	
}
</style>
</head>
<body>
<div id="div1"></div>  
<script type="text/javascript">
window.onload=function (){
    var oDiv=document.getElementById('div1');
    if(oDiv.currentStyle){
    //IE
    alert(oDiv.currentStyle.width);
    }
    else{
    //FF
    alert(getComputedStyle(oDiv,false).width);
    }
};
//通过封装一个函数来写，将来用的时候再调用
function getStyle(obj,name){
    if(obj.currentStyle) {
        return obj.currentStyle[name];
    }
    else{
        return getComputedStyle(obj,false)[name];
    }
};
window.onload=function(){
    var oDiv=document.getElementById('div1');
    alert(getStyle(oDiv,'width'));
}
</script>
</body>
</html>

分步拆解，解决兼容，封装成getStyle事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>深入javascript</title>
<style type="text/css">
#div2 {
    width: 500px;
    height: 100px;
    background-color: green;	
}
</style>
</head>
<body>
    <div id="div1"></div>  
<script type="text/javascript">
//最初
if(oDiv2.currentStyle){
//IE
console.log(oDiv2.currentStyle.height);
}else{
//FF
console.log(getComputedStyle(oDiv2,false).width);
}
//封装一个兼容性的获取元素样式的函数
//分析：哪个元素，哪个样式
function getStyle(obj,attr){
    if(obj.currentStyle){
    //IE
    return obj.currentStyle[attr];
    }else{
    //FF
    return getComputedStyle(obj,false)[attr];
    }
}
//用法
window.onload=function(){
    var oDiv=document.getElementById("div2");
    console.log(getStyle(oDiv,"width"));
}
//进一步封装
//obj:获取谁的样式，attr：样式名称,value样式的值
function css(obj,attr,value){
    if(arguments.length==2){//获取
       return getStyle(obj,attr)
    }else if(arguments.length==3){//设置
       obj.style[attr]=value;
    }
}
//用法
//oBtn.onclick=function(){
//   css(oDiv,"background","black");
//   css(oDiv,"border","3px solid yellow");
//   console.log(css(oDiv,"width"));
}
</script>
</body>
</html>

参考博客：知道一个div的宽高背景色，如何不通过写在行间样式的办法更改样式？ https://www.cnblogs.com/zhangjingyun/p/4561648.html

js-style,currentStyle与getComputedStyle() https://blog.csdn.net/duchao123duchao/article/details/51306369

元素未显示设置width/height时IE中无法使用currentStyle获取 https://www.cnblogs.com/snandy/archive/2011/09/05/2167056.html

currentStyle https://www.cnblogs.com/wang715100018066/p/6000536.html

lilly呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-style、currentStyle与getComputedStyle()的区别

前言：用js的style属性可以获取html标签的行间样式（oDiv.style.width），但是不能获取非行间样式；如果需要取非行间样式（不能用来设置），可以使用obj.currentStyle[attr]（IE）和getComputedStyle(obj,false)[attr](FF)来解决(然而，为了让其兼容，解决方法，封装成getStyle事件)。一、区别(1)style专指行...
复制链接

扫一扫