获取非行间样式-各个浏览器兼容性问题

最新推荐文章于 2022-01-12 20:57:24 发布

嫌疑-人

最新推荐文章于 2022-01-12 20:57:24 发布

阅读量1k

点赞数

分类专栏： javaScript 文章标签： style javascript currentStyle getComputedStyle

本文链接：https://blog.csdn.net/qq_39396275/article/details/80835673

版权

javaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在前面的文章中有利用，style 可以获取行间样式和设置行间样式:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script>
window.onload=function(){
    var oDiv=document.getElementById("div1");
    alert(oDiv.style['width']);
}
</script>
<body>
<div id="div1" style="width:200px;height:200px;background:#0F6;">
</body>
</html>

但是不能获取非行间样式，根据不同的浏览器有以下方式获取;

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
width:200px;
height:200px;
background:#0F6;
    }
</style>
<script>
window.onload=function(){
    var oDiv=document.getElementById("div1");
    //alert(oDiv.currentStyle.width); //只能在IE浏览器中使用
    //alert(getComputedStyle(oDiv,false).width); //chrome  360 火狐

    //解决兼容性问题
    if(oDiv.currentStyle){//支持IE
    alert(oDiv.currentStyle.width);
    }
    else{
        alert(getComputedStyle(oDiv,false).width);
    }
}
</script>
</head>

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