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

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。

仅供参考，对于您在此处的特定目标，可能是更好的设计模式，即仅在元素上打开/关闭类，然后根据是否存在类名而不放特定样式将所有样式留给CSS JavaScript中的参数。

Answer 2

内联attr的默认值为“”，这是伪造的值。 因此，您需要一个默认值。

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

}

或者如果您通过添加和删除类来避免具有1000值的样式属性的特殊性，这样做可能会更清洁

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-11-13 01:00:35

解决方案2
-1 2014-11-13 01:09:16

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-11-13 01:00:35

解决方案2 -1 2014-11-13 01:09:16

解决方案1
0 已采纳 2014-11-13 01:00:35

解决方案2
-1 2014-11-13 01:09:16