我不明白为什么我无法改变文字的颜色' Welcome'.以下是两种方法,任何帮助将不胜感激.
<html>
<head>
<script language="text/javascript">
function changeColor(c) {
message.style.color=c;
}
</script>
</head>
<body>
<p id="message" style="color:orange"> Welcome </p>
<ul id="color">
<li onclick='changeColor(this.innerText);'>Blue</li>
<li onclick='changeColor(this.style.color);'>Red</li>
</ul>
</body>
</html>
你依赖于那些我建议不依赖的东西:
message因为你把它作为一种id价值而成为全球性的.相反,用于document.getElementById查找元素.
innerText主要是微软的事情.如图所示,您可以使用innerHTML,这是可靠的跨浏览器,但我建议将颜色存储在data-属性中,以便您的标签可以是您想要的任何颜色(包括与CSS颜色不同的语言)名).
以下是我可能在不引入任何库并保持相当简单的情况下接近它的方法:
标记:
<p id="message" style="color:orange"> Welcome </p>
<ul id="color">
<li data-color="blue">Blue</li>
<li data-color="red">Red</li>
</ul>
JavaScript的:
(function() {
var ul = document.getElementById('color'),
list = ul.getElementsByTagName('li'),
message = document.getElementById('message'),
index;
for (index = 0; index < list.length; ++index) {
list[index].onclick = changeColor;
}
function changeColor() {
message.style.color = this.getAttribute('data-color');
}
})();
在script包含JavaScript标记必须经过的标记才能正常工作.
这完全依赖于标准,应该符合所有主流浏览器.data-HTML4中的属性无效(如果验证是工作流程的一部分),但它们适用于所有主要(可能是所有次要)浏览器.它们从HTML5开始有效(允许data-任何元素在任何元素上都带有前缀,正是出于此目的).
更新:重新评论如下:
如何更改changeColor函数,以便它接受changeColor(this.innerText);'？或者changeColor(this.style.color); ??
如果您想要分离出功能(非常合理),您可以这样做:
(function() {
var ul = document.getElementById('color'),
list = ul.getElementsByTagName('li'),
message = document.getElementById('message'),
index;
for (index = 0; index < list.length; ++index) {
list[index].onclick = changeColorViaDataAttr;
}
function changeColorViaDataAttr() {
changeColor(this.getAttribute('data-color'));
}
function changeColor(color) {
message.style.color = color;
}
})();
由于函数只改变了message元素的颜色,实际上最好稍微重命名这些函数,但你明白了.
偏离主题:如果你利用那些创建了jQuery,Prototype,YUI,Closure或其他几个库之类的人所做的艰苦工作,很多东西都会变得容易多了.这些库有助于平滑浏览器差异并提供大量实用功能.例如,我连接上面的事件处理程序(分配给onclick属性)的方式,如onclick属性,是非常老式的,但由于较旧的Microsoft浏览器,因此更新的方式有所不同会让这个例子变得复杂一点.图书馆为你顺利完成了这样的事情.
这是使用jQuery的相同JavaScript代码:
(function() {
$("#color li").click(changeColor);
function changeColor() {
$("#message").css("color", this.getAttribute("data-color"));
}
})();
如果您愿意,可以使它更紧凑:
(function() {
$("#color li").click(function() {
$("#message").css("color", $(this).data("color"));
});
})();