Question

在页面加载标签的颜色（即“输入你的名字”）后，应该变为红色。但是标签的颜色保持不变。为什么会这样？

SCRIPT

window.onload = startScript;

function startScript() {
if( document.getElementById("text_field").value === "me") {
    var allTags = document.getElementsByTagName("label");
    allTags.className = "inserter";
}
}

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title>
<script type="text/javascript" src="inserter.js">
</script>
<style type="text/css">
@import url("inserter.css");
</style>
</head>

<body bgcolor="#99FFFF">
<form>
<label>Enter your name<input type="text" id="text_field" value="me" />
</label>
</form>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

.inserter {
color:#F00;
}

现在，由于该值等于me类名，因此“inserter”会动态插入到label元素中，颜色应该显示为红色。

为什么不发生这种情况？

Answer 1

我认为你需要遍历allTags：

var allTags = document.getElementsByTagName("label");
for (var i = 0; i < allTags.length; i++) {
  allTags[i].className = 'inserter';
}

如果你能使用jQuery，它会让生活变得更加容易！

更新以添加与您的代码相当的jQuery：

if ($('#text_field').val() === 'me') {
  $('label').addClass('inserter');
}

它更加整洁

Answer 2

getElementsByTagName方法返回一个数组，其中包含与该标记匹配的每个DOM元素。调用allTags.className = 'inserter'为数组本身的'className'属性赋值，而不是为该数组中的每个元素赋值。您需要遍历它，并将className分别分配给每个标记。

Answer 3

正如其他人已经提到的那样， getElementsByTagName（）会返回一个包含元素的数组，但您也应该在第一行添加括号，您可以在其中调用 startScript（）来将其标识为一个功能。

这个例子有效; http://jsfiddle.net/aQASU/

Answer 4

通过jquery尝试这个。

allTags.addClass("inserter");

为什么标签的颜色不会改变？

4 个答案: