JavaScript函數在Firefox上運行良好但在Chrome上運行良好

Question

我有一個javascript函數，點擊按鈕改變導航欄的顏色。 我使用了驗證器，它沒有返回任何錯誤。我在兩個瀏覽器上都使用了驗證器。 這是代碼的一部分，任何建議將不勝感激。

<body class ="backgroundTwo">
        <h1 class ="centered sansSerif background" >Hello World!</h1>
        <div>
            <ul class ="center">
                <li class ="center"><a id="demo" class ="center"        href="about.html" >About This Site</a></li>
               <li class ="center"><a id ="demo2" class="center" href="current.html">Current Work</a></li>
               <li class ="center"><a id ="demo3" class="center" href="http://www.dallascowboys.com/">Cowboys</a><li>

            </ul> 
        </div>

        <h1 class = "centered" > <img src ="image.jpg" alt = "Cowboys" style="width:304px;height:228px;"></h1>
        <p class = "centered sansSerifTwo" >This is lrodrig6's CSC412 WebSite Project</p>
        <div class ="wrapper">
            <button class="button" onclick="colorFunction()">click    me</button>
        </div>
        <script>
            function colorFunction(){
             var color3 = document.getElementById("demo").style.backgroundColor;
             var color2 = document.getElementById("demo2").style.backgroundColor;
             var color  = document.getElementById("demo3").style.backgroundColor;

                if (color === "lightblue" && color2 === "lightblue" && color3 === "lightblue"){
                    document.getElementById("demo").style.backgroundColor = "white";
                    document.getElementById("demo2").style.backgroundColor = "white";
                  document.getElementById("demo3").style.backgroundColor = "white";
            } else {
                    document.getElementById("demo").style.backgroundColor = "lightblue";
                document.getElementById("demo2").style.backgroundColor = "lightblue";
                document.getElementById("demo3").style.backgroundColor = "lightblue";
               }
        }    
       </script>
  </body>
</html>

Answer 1

當您將元素的樣式屬性（例如style.backgroundColor ）設置為"lightblue" style.backgroundColor "lightblue"您不能指望將其作為"lightblue"讀回。

例如，chrome返回"rgb(173, 216, 230)" 。

您需要保留一個變量來存儲當前狀態，而不是依賴於回讀樣式屬性。

讀取和寫入style屬性與訪問Javascript對象的常規成員不同。 這些操作等同於對getPropertyValue和setProperty調用，並且您無法保證設置時傳遞的值與檢索時返回的值相同。

例如，也可能通過"rgb(1,2,3)"返回"rgb(1, 2, 3)" （帶空格）。 如果你將一個屬性設置為無效的東西（你永遠不會從屬性中讀取一些無效的東西），這是非常明顯的。

如果需要在HTML元素中存儲邏輯狀態，則可以使用為此用法准確引入的數據屬性。

在你的具體情況下，例如我會寫一些類似於：

var color = "lightblue"; // Using a regular variable to store status

function colorFunction(){
    // Toggle color
    color = (color === "lightblue") ? "white" : "lightblue";
    document.getElementById("demo").style.backgroundColor = color;
    document.getElementById("demo2").style.backgroundColor = color;
    document.getElementById("demo3").style.backgroundColor = color;
}

Answer 2

我不相信這是正確的方法，但你可以用rgb(173, 216, 230) lightblue替換lightblue以獲得快速解決方案

像這樣

function colorFunction(){
         var color3 = document.getElementById("demo").style.backgroundColor;
         var color2 = document.getElementById("demo2").style.backgroundColor;
         console.log(color2);
         var color  = document.getElementById("demo3").style.backgroundColor;

            if (color === "rgb(173, 216, 230)" && color2 === "rgb(173, 216, 230)" && color3 === "rgb(173, 216, 230)"){
                document.getElementById("demo").style.backgroundColor = "white";
                document.getElementById("demo2").style.backgroundColor = "white";
              document.getElementById("demo3").style.backgroundColor = "white";
        } else {
                document.getElementById("demo").style.backgroundColor = "rgb(173, 216, 230)";
            document.getElementById("demo2").style.backgroundColor = "rgb(173, 216, 230)";
            document.getElementById("demo3").style.backgroundColor = "rgb(173, 216, 230)";
           }
    }

Answer 3

使用“style.backgroundColor”的替代方法是使用

document.getElementById("demo").setAttribute("style", "background-color: lightblue";

這可能會產生更可靠的響應。

JavaScript函數在Firefox上運行良好但在Chrome上運行良好

問題描述

3 個解決方案

解決方案1
6 已采納 2015-10-10 06:06:17

解決方案2
1 2015-10-10 06:10:54

解決方案3
1 2015-10-10 06:20:44

JavaScript函數在Firefox上運行良好但在Chrome上運行良好

問題描述

3 個解決方案

解決方案1 6 已采納 2015-10-10 06:06:17

解決方案2 1 2015-10-10 06:10:54

解決方案3 1 2015-10-10 06:20:44

解決方案1
6 已采納 2015-10-10 06:06:17

解決方案2
1 2015-10-10 06:10:54

解決方案3
1 2015-10-10 06:20:44