动态更改具有相同类的所有 html 元素的背景颜色失败答案

【问题标题】：Dynamically changing background color of all html elements with same class failing动态更改具有相同类的所有 html 元素的背景颜色失败
【发布时间】：2018-03-26 20:44:59
【问题描述】：

我正在尝试使用 ajax、jsp 和 servlet 调用动态更新某些元素的背景颜色。我已经包含了我的 js 函数以及我的 servlet 和控制台日志的屏幕截图。代码正在运行所有行，但前端没有任何变化。真的很感谢帮助！我还尝试制作另一个 JS 函数来处理 bg 更改，但这根本没有帮助。

        <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，因为我已经尝试了这两种方法。

【问题讨论】：

您正在更改 text 颜色 (element.style.color) 而不是 changeBg() 中的 background 颜色 element.style.backgroundColor

标签： javascript html css ajax servlets

【解决方案1】：

请使用

element.style.backgroundColor

而不是

element.style.color

因为style.color是改变字体颜色，而不是背景颜色

【讨论】：

【解决方案2】：

我认为最好的解决方案是为类添加带有新颜色的样式。

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

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

			head.appendChild(style);
		}

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

【讨论】：

【解决方案3】：

感谢您的帮助。我最终弄清楚了。事实证明，您不能动态地保持表单的某些部分发生变化。

【讨论】：