style与className

最新推荐文章于 2021-10-10 18:15:59 发布

JZ_YouMayFly

最新推荐文章于 2021-10-10 18:15:59 发布

阅读量4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/JZ_YouMayFly/article/details/77148578

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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不要混用

JZ_YouMayFly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
style与className

stylestyle加的是行间样式 style取的是行间样式取值代码如下：var oDiv=document.getElementById('div1');alert(oDiv.style.background);如果background在行间，<div id="div1" style="background: red;"> 能取出background值如果background
复制链接

扫一扫