放置在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