JavaScript获取css行间样式,获取非行间样式。【行间样式获取】

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    #div1 {
        width:100px;
        height:100px;
        background: red;
    }
</style>
</head>

<body>
<div id="div1"></div>
<script type="text/javascript">
    var odiv=document.getElementById('div1');
    if(odiv.currentStyle){
        alert(odiv.currentStyle.backgroundColor)
    }
    else
        {
            alert(getComputedStyle(odiv,false).backgroundColor);
        }
</script>
</body>
</html>
html节点的样式分为以下几种
(1)浏览器默认样式
(2)引用样式(引用外部css文件的样式、style标签内定义的样式)
    引用外部css样式:<link rel="stylesheet" href="css/style.css" type="text/css">
    style标签内:<style> width:100px; </style>
(3)行间样式(节点style属性定义的样式)比如:<div style="width:100px;"></div>

有些童鞋会问:为什么要获取“非行间样式”?

有时候在用JS动态设置一个元素的样式的时候要同时考虑style="display:none"和样式表里面的elem {display:none}这两种情况。举个简单的例子说明:如果单击一个按钮让一个div元素显示或隐藏(单击按钮时如果div默认是隐藏的就显示,反之隐藏)。首先要获取div元素默认的显示状态,如果这时只获取行间样式而样式表里设置了DIV元素的display的话获取的样式就不那么准确。所以除了行间样式外样式表内的非行间样式也要同时获取才行。

下面就是获取非行间样式的示例:

HTML代码:

<style>
    *{ text-align:center;}
    input{ margin-top:30px; padding:10px 20px;}
    #div1{ width:500px; height:300px; background:red; margin:10px   auto;}
</style>

<input type="button" value="style" id="btn" />
<div id="div1"></div>

获取非洲开发银行间样式

该方法包容IE低版本,获取到的是带px的样式。

<script>
    function getStyle(obj,name) {
        return (obj.currentStyle || getComputedStyle(obj,false))[name];
    }

</script>
<div id='div1' style="backgroud:red">测试</div>   

<script>

  var odiv=document.getElementById('div1');  //先获取到要获取样式的元素标签,也就是获取到div1

  console.log(odiv.style.background);      //这样我们就可以获取到了行间的样式了

</script>

翻看原来的小说

 

【内连样式获取】

 javascript代码如下:

网站地图xml地图