Question

通过JavaScript更改DIV的类很有效，直到我通过更改该DIV的样式属性来“中断它”。

案例0：左侧更改为400

案例1：更改为600

案例2：不起作用！

为什么？

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
        .pos1 {left: 200px; top:400px;}
        .pos2 {left: 400px; top:400px;}
        .pos3 {left: 800px; top:400px;}
    </style>
</head>

<body>
        <div id = "img" class = "pos1" style="position:absolute;"> <img src="gfx/1n.png"> </div>


        <script type="text/javascript">
            var action = 0;
            window.onmousedown = function(event){makeAction();}

            function makeAction() {
                switch(action) {
                    case 0: action++; document.getElementById('img').className = "pos2"; break
                    case 1: action++; document.getElementById('img').style.left = "600px"; break;
                    case 2: action++; document.getElementById('img').className = "pos3"; break;
                }

            }

        </script>
</body>
</html>

Answer 1

因为您在第二种情况下设置的样式属性会覆盖您在上一种情况下指定的类的样式。

在第一种情况之后，图像标记是

<img class="pos2" ... />

所以它的位置是400px。

在第二种情况之后，图像标签是

<img class="pos2" style="left: 600px" ... />

即使它仍然有类pos2，样式属性会覆盖左侧定位，所以它现在位于600px左侧。

在最后一种情况之后，图像标记是：

<img class="pos3" style="left: 600px;" .. />

即使它现在有类pos3，样式属性仍然覆盖左侧定位，所以它仍然位于600px左侧。

了解CSS在应用时不依赖于，但它始终遵循特异性规则。规则声明标记的style属性中的样式规则会覆盖类中的样式规则。

您可以使用important关键字覆盖规则：

.pos3 {left: 800px !important; top:400px;}

Answer 2

由于您通过<object>.style.left设置了左侧属性，因此您将其指定为内联规则，并且只能使用其他内联规则（或规则特异性更改，例如使用!important）覆盖在你的班上。）

CSS通过JavaScript：通过样式更改来改变类“中断”

2 个答案: