Question

我尝试使用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，因为我已尝试过两者。

Answer 1

请使用

element.style.backgroundColor

而不是

element.style.color

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

Answer 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>

Answer 3

感谢您的帮助。我最终搞清楚了。事实证明，您无法动态保持表单的某些部分更改。

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

3 个答案: