Question

以下代码仅在我从head标签中删除h1的样式并使用注释行中显示的内联样式时才有效，但不能如下所示。

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                text-align: center; 
                color: black;
            }
        </style>
        <script>
            function changeColor()
            {
                var dom = document.getElementById("head1"); 
                var clr = dom.style.color;
                switch(clr)
                {
                    case 'black':
                        dom.style.color = "red";
                        break;
                    case 'red':
                        dom.style.color = "black";
                        break;
                }
            }
        </script>
    </head>
    <body onclick="changeColor()">
        <!-- <h1 id="head1" style="text-align: center; color: black;">CLICK ON ME!</h1> -->
        <h1 id="head1">CLICK ON ME!</h1>
    </body>
</html>

非常感谢您的帮助。

Answer 1

如果要从样式表中读取元素的样式，则必须使用可以使用window.getComputedStyle()获得的计算样式。

通过stylesheeets应用的样式无法通过elem.style读取。这仅显示直接应用于该特定元素的样式（不从样式表或父项继承）。

您可以像这样更改代码，然后除了直接应用的值之外，还可以使用样式表值：

        function changeColor()
        {
            var dom = document.getElementById("head1"); 
            var clr = getComputedStyle(dom, null).getPropertyValue("color");
            switch(clr)
            {
                case 'black':
                    dom.style.color = "red";
                    break;
                case 'red':
                    dom.style.color = "black";
                    break;
            }
        }

注意：getComputedStyle()需要IE9或更高版本。 IE8和更早版本有不同的方式做同样的事情所以当支持旧版本的IE时，某种类型的polyfill如here所示是必要的。

仅供参考，为了您的特定目标，可能是一个更好的设计模式，只需在元素上打开/关闭类，并根据类名是否存在而将所有样式留给CSS，而不是将特定样式参数放在Javascript中。

Answer 2

内联attr的默认值是＆＃34;＆＃34;这是一个虚假的价值。因此，您需要一个默认值。

switch(clr) {
    case 'black':
        dom.style.color = "red";
        break;
    case 'red':
        dom.style.color = "black";
        break;
    default:
        dom.style.color = "red";

}

或者如果你通过添加和删除类来实现它可以更干净，以避免具有1000个值的样式attr的特异性

放置在head标签中时无法识别的样式

2 个答案: