获取非行间样式

最新推荐文章于 2020-11-30 09:26:54 发布

Cc_JoJo

最新推荐文章于 2020-11-30 09:26:54 发布

阅读量553

点赞数 1

分类专栏： web前端文章标签： html

本文链接：https://blog.csdn.net/caohoucheng/article/details/72819590

版权

web前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

首先举个获取行间样式的例子
1、html元素样式写在行间

<div id="div1" style="width:200px;height:200px;background:red"></div>

获取行间样式

<script>
window.onload=function()
{
    var oDiv=document.getElementById('div1');
    alert(oDiv.style.width);
}
</script>

结果：弹出‘200px‘；
这里写图片描述

2.若将html元素样式不写在行间，例如写在css样式表或style中如下：

<div id="div1" ></div>

<style>
#div1{
   width:200px;
   height:200px;
   background:red;
}
</style>

现在使用之前方法获取样式

<script>
window.onload=function()
{
    var oDiv=document.getElementById('div1');
    alert(oDiv.style.width);
}
</script>

结果：弹出空；
这里写图片描述
3.若将样式写在非行间时想获取非行间样式就要用到currentStyle（*注IE兼容，其他不兼容）

<style>
#div1 {
    width:200px;
    height: 200px;
    background: red;
}
</style>
<script>
window.onload=function()
{
    var oDiv=document.getElementById('div1');
    alert(oDiv.currentStyle.width);
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>

这里写图片描述

还可以使用getComputedStyle（低版本ie不兼容）

<script>
window.onload=function()
{
    var oDiv=document.getElementById('div1');
    alert(getComputedStyle(oDiv,false).width);
}
</script>

为了解决兼容性问题：
alert(oDiv.currentStyle)在ie中alert的是object，在火狐中alert的是undefind，所以添加if判断使用时机，如下兼容性即可解决

<script>
window.onload=function()
{
    var oDiv=document.getElementById('div1');

    if(oDiv.currentStyle)
    {
    //ie
        alert(oDiv.currentStyle.width);
    }else{
    //FF
        alert(getComputedStyle(oDiv,false).width);
    }

}
</script>
</head>
<body>
<div id="div1">
</div>
</body>

简化if else兼容判断（封装一个函数）：
结果：弹出200px

<script>
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>
</head>
<body>
<div id="div1">
</div>
</body>

若写alert(getStyle(oDiv,’background’));则会弹出空。因为background为复合样式，例如还有border
*注：没办法取符合样式，可以取单一样式，如width，height等，若想取背景色可以写alert(getStyle(oDiv,’background-color’));