pro*_*eve 2 html javascript css forms
页面加载后,标签的颜色(即"输入你的名字")应改为红色.但标签的颜色保持不变.为什么会这样？
脚本
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元素中,颜色应该显示为红色.
为什么不这样呢？
我认为你需要循环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');
}
它更加整洁