動態更改所有具有相同類別的html元素失敗的背景顏色

我試圖使用ajax，jsp和servlet調用動態更新某些元素的背景顏色。我已經包含了我的js函數以及我的servlet和控制檯日誌的截圖。代碼正在運行所有的行，但前端沒有任何變化。真的很感謝幫助！我也嘗試製作另一個JS函數來處理bg的變化，但這根本沒有幫助。動態更改所有具有相同類別的html元素失敗的背景顏色

 <script> 
     function validate() { 
       console.log("hello"); 
       var xhttp = new XMLHttpRequest(); 
       xhttp.open("GET", "/"+window.location.pathname.split("/")[1]+"/HomeServlet?inputName=" + document.searchform.search.value, false); 
       xhttp.send(); 
       if (xhttp.responseText.trim().length > 0) { 
        console.log("in if statement " + xhttp.responseText); 
        var str = xhttp.responseText; 
        var result = str.split(" "); 
        console.log("str " + str + " - result: " + result + " result size = " + result.length); 
        for(var i = 0; i < result.length; i++) { 
         console.log("in first loop"); 
         console.log("value:" + result[i]); 
         elements = document.getElementsByClassName(result[i]); 
         console.log("elements: " + elements.length); 
         for (var j = 0; j < elements.length; j++) { 
          console.log("in the loop"); 
          //elements[j].style.backgroundColor = "red"; 
          changeBg(elements[j]); 
         } 
        } 
       //return false; 
       } 
       return true; 
      } 
     function changeBg(element) { 
       alert(window.getComputedStyle(element).backgroundColor); 
       element.style.color = "red"; 

      } 
     </script>

在我的瀏覽器，我的控制檯讀取以下證明代碼運行的每一行，包括輸出警告框又因爲我都試過不改變element.style.color或的backgroundColor。

來源

2017-10-15 Uri Rahimi

您正在changeBg（）中更改* text * color（'element.style.color'）而不是* background * color'element.style.backgroundColor'。 – FluffyKitten

請使用

element.style.backgroundColor

代替

element.style.color

因爲style.color是改變字體顏色，不適用於背景顏色

來源

2017-10-15 04:21:28 Yoman

我認爲最好的解決方案是爲班級添加新的顏色樣式。

var counter = 0; 
 
\t \t function changeBG(){ 
 
\t \t \t counter++; 
 
\t \t \t var css = '.testBGclasss { background: '+(counter%2?'red':'blue')+'; }', 
 
\t \t \t \t head = document.head || document.getElementsByTagName('head')[0], 
 
\t \t \t \t style = document.createElement('style'); 
 

 
\t \t \t style.type = 'text/css'; 
 
\t \t \t if (style.styleSheet){ 
 
\t \t \t style.styleSheet.cssText = css; 
 
\t \t \t } else { 
 
\t \t \t style.appendChild(document.createTextNode(css)); 
 
\t \t \t } 
 

 
\t \t \t head.appendChild(style); 
 
\t \t }

<html> 
 
<head></head> 
 
<body> 
 
\t <div class="testBGclasss"> 
 
\t \t <h1>Some text<h1> 
 
\t </div> 
 
\t <input type="button" value="change background" onclick="changeBG()"/> 
 
\t </body> 
 
</html>

來源

2017-10-15 04:31:22 Alexandr

感謝您的幫助。我最終搞清楚了。原來，你不能動態地保留一個表單的部分改變。

來源

2017-10-15 08:03:13

動態更改所有具有相同類別的html元素失敗的背景顏色

回答

相關問題