这是一道作业题，要求我使用从一个 XML 文件中收集的颜色信息，通过一个按钮来改变二十个 div 的颜色。我通过在 html 文档中创建一个 div 类、将 XML 数据加载到 Javascript 文件并遍历 XML 来解决这个问题。我认为问题是我错误地将 XML 文档加载到 Javascript 中？我贴出部分代码如下(我只贴了一部分css所以不会那么长)
<div class="div" id="two"><h2>2</h2></div>
<div class="div" id="one"><h1>1<br><br> <br>REQUIREMENT #1</h1></div>
<div class="div" id="three"><h2>3</h2></div>
<div class="div" id="four"><h2>4</h2></div>
<div class="div" id="five"><h2>5</h2></div>
<div class="div" id="six"><h2>6</h2></div>
<div class="div" id="seven"><h2>7</h2></div>
<div class="div" id="eight"><h2>8</h2></div>
<div class="div" id="nine"><h2>9</h2></div>
<div class="div" id="ten"><h2>10</h2></div>
<div class="div" id="eleven"><h2>11</h2></div>
<div class="div" id="twelve"><h2>12</h2></div>
<div class="div" id="thirteen"><h2>13</h2></div>
<div class="div" id="fourteen"><h2>14</h2></div>
<div class="div" id="fifteen"><h2>15</h2></div>
<div class="div" id="sixteen"><h2>16</h2></div>
<div class="div" id="seventeen"><h2>17</h2></div>
<div class="div" id="eighteen"><h2>18</h2></div>
<div class="div" id="nineteen"><h2>19</h2></div>
<div class="div" id="twenty"><h2>20</h2></div>
</div>
<input type="button" value="changediv" onclick="changeColors()">
<?xml version="1.0" encoding="UTF-8"?>
<divcolors>
<div name ="one">
<color>aliceblue</color>
</div>
<div name ="two">
<color>aquamarine</color>
</div>
<div name="three">
<color>coral</color>
</div>
<div name="four">
<color>cornflowerblue</color>
</div>
<div name="five">
<color>cyan</color>
</div>
<div name="six">
<color>darkgray</color>
</div>
<div name="seven">
<color>darkolivegreen</color>
</div>
<div name="eight">
<color>darkviolet</color>
</div>
<div name="nine">
<color>deepskyblue</color>
</div>
<div name="ten">
<color>forestgreen</color>
</div>
<div name="eleven">
<color>honeydew</color>
</div>
<div name="twelve">
<color>lightsalmon</color>
</div>
<div name="thirteen">
<color>lightsteelblue</color>
</div>
<div name="fourteen">
<color>maroon</color>
</div>
<div name="fifteen">
<color>mediumspringgreen</color>
</div>
<div name="sixteen">
<color>mediumturquiose</color>
</div>
<div name="seventeen">
<color>mistyrose</color>
</div>
<div name="eighteen">
<color>oldlace</color>
</div>
<div name="nineteen">
<color>olive</color>
</div>
<div name="twenty">
<color>azure</color>
</div>
</divcolors>
CSS 示例:
#one {
border-radius: 300px;
background: blue;
position: absolute;
float: left;
top: 550px;
width: 300px;
height: 300px;
margin-left: 500px;
margin-top: 5px;
z-index: 4;
transition-duration: 1s;
transition-timing-function: cubic-bezier (.5,-5,.3,1.3), ease;
transition-delay: .2s;
}
JavaScript:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
changeColors(xhttp);
}
};
xhttp.open("GET", "divcolors.xml", true);
xhttp.send();
function changeColors(xml) {
var xmlDoc = xml.responseXML;
var colorCrap= "";
var colorColor = xmlDoc.getElementsByTagName("color");
var i;
var x = document.getElementsByClassName("div");
for (i=0; i<colorColor.length;i++){
colorCrap += colorColor[i].childNodes[0].nodeValue;
}
x[i].style.backgroundColor = colorCrap;
}
最佳答案
你很接近，但没有雪茄。您需要在 XML 中选择正确的元素并以正确的方式获取值。有几种方法可以解决这个问题，这里我只是根据你的方法做了。
我做了一个工作演示，你可以从中得到启发:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XML Color</title>
<script src="script.js"></script>
</head>
<body>
<div>
<div class="div" id="one"><h1>1<br><br> <br>REQUIREMENT #1</h1></div>
<div class="div" id="two"><h2>2</h2></div>
<div class="div" id="three"><h2>3</h2></div>
<div class="div" id="four"><h2>4</h2></div>
<div class="div" id="five"><h2>5</h2></div>
<div class="div" id="six"><h2>6</h2></div>
<div class="div" id="seven"><h2>7</h2></div>
<div class="div" id="eight"><h2>8</h2></div>
<div class="div" id="nine"><h2>9</h2></div>
<div class="div" id="ten"><h2>10</h2></div>
<div class="div" id="eleven"><h2>11</h2></div>
<div class="div" id="twelve"><h2>12</h2></div>
<div class="div" id="thirteen"><h2>13</h2></div>
<div class="div" id="fourteen"><h2>14</h2></div>
<div class="div" id="fifteen"><h2>15</h2></div>
<div class="div" id="sixteen"><h2>16</h2></div>
<div class="div" id="seventeen"><h2>17</h2></div>
<div class="div" id="eighteen"><h2>18</h2></div>
<div class="div" id="nineteen"><h2>19</h2></div>
<div class="div" id="twenty"><h2>20</h2></div>
</div>
<input type="button" value="changediv" onclick="setTheColors()">
</body>
</html>
function changeColors(xml) {
var xmlDoc = xml.responseXML;
var colorColor = xmlDoc.getElementsByTagName("div");
for (var i = 0; i < colorColor.length; i++){
var current = colorColor[i].getAttribute('name');
var theDiv = document.getElementById(current);
theDiv.style.backgroundColor = colorColor[i].childNodes[0].nextSibling.innerHTML;
}
}
function setTheColors(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
changeColors(xhttp);
}
};
xhttp.open("GET", "divcolors.xml", true);
xhttp.send();
}
<?xml version="1.0" encoding="UTF-8"?>
<divcolors>
<div name ="one">
<color>aliceblue</color>
</div>
<div name ="two">
<color>aquamarine</color>
</div>
<div name="three">
<color>coral</color>
</div>
<div name="four">
<color>cornflowerblue</color>
</div>
<div name="five">
<color>cyan</color>
</div>
<div name="six">
<color>darkgray</color>
</div>
<div name="seven">
<color>darkolivegreen</color>
</div>
<div name="eight">
<color>darkviolet</color>
</div>
<div name="nine">
<color>deepskyblue</color>
</div>
<div name="ten">
<color>forestgreen</color>
</div>
<div name="eleven">
<color>honeydew</color>
</div>
<div name="twelve">
<color>lightsalmon</color>
</div>
<div name="thirteen">
<color>lightsteelblue</color>
</div>
<div name="fourteen">
<color>maroon</color>
</div>
<div name="fifteen">
<color>mediumspringgreen</color>
</div>
<div name="sixteen">
<color>mediumturquiose</color>
</div>
<div name="seventeen">
<color>mistyrose</color>
</div>
<div name="eighteen">
<color>oldlace</color>
</div>
<div name="nineteen">
<color>olive</color>
</div>
<div name="twenty">
<color>azure</color>
</div>
</divcolors>
关于javascript - 将 XML 数据加载到 JavaScript 中并使用 XML 数据更改 div 颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33837344/