您现在的位置：首页 >> 前端 >> 内容

前端获取非行间样式、各个浏览器兼容性问题讲解

时间：2018/6/29 16:48:51 点击：

　　核心提示：在前面的文章中有利用，style 可以获取行间样式和设置行间样式:html xmlns=https://www.w3.org/1999/xhtmlheadmeta http-equiv=Content...

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

<html xmlns="https://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("p1");
    alert(oDiv.style['width']);
}
</script>
<body>
<p id="p1" style="width:200px;height:200px;background:#0F6;">
</body>
</html>

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

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

为了以后可以方便用到，可以封装成函数库直接调用。