style与className

来源：互联网发布：程序员需求量编辑：程序博客网时间：2024/05/29 14:50

style

style加的是行间样式
style取的是行间样式
取值代码如下：

var oDiv=document.getElementById('div1');alert(oDiv.style.background);

如果background在行间，

<div id="div1" style="background: red;">

能取出background值
这里写图片描述
如果background在样式表里，

#div1 {        width: 200px;        height: 200px;        border: 1px solid brown;        background:red;        }

不能取出background值
这里写图片描述

优先级

样式的优先级
(通配符)* < 标签< class< id < 行间

元素.style.属性=xxx 是修改行间样式，因此之后再修改className不会有效果

示例如下：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            #div1 {                width: 200px;                height: 200px;                border: 1px solid brown;            }            .box{background: red;}        </style>        <script type="text/javascript">            function toRed(){                var oDiv=document.getElementById('div1');                oDiv.className='box';            }            function toGreen(){                var  oDiv=document.getElementById('div1');                oDiv.style.background='green';            }        </script>    </head>    <body>        <input type="button" name="Button" id="" value="变红" onclick="toRed()" />        <input type="button" name="Button2" id="" value="变绿" onclick="toGreen()" />        <div id="div1"> </div>    </body></html>

效果是：
先点击变红有效果，在点击变绿也有效果，然后再点击变红就没有效果了
如果先点击了变绿，变红就没有效果了

所以style和className不要混用

阅读全文

0 0