我试图弄清楚如何使用下拉菜单更改网页的文本颜色,我已经设法使用下拉菜单成功更改背景颜色,该下拉菜单是以下代码:
谁能告诉我如何做到这一点?
更改<body>
元素的文本颜色:
document.body.style.color="#"+backGround.options[backGround.selectedIndex].value
见演示。
首先,将你的 javascript 移到一个单独的函数中(这只是一个很好的做法,并且更容易阅读/更新)并设置你的 onChange(); 调用该函数,并将 select 的值传递给它。
然后把你的函数写成这样:
<html>
<head>
<script type="text/javascript">
function updateTextColour(value) {
document.body.style.color = '#' + value;
}
</script>
</head>
<body>
<form>Change the background color:
<select name="backGround" size="1" onChange="updateTextColour(this.value)">
<option value="000000">[Black]</option>
<option value="FF0400">[Red]</option>
<option value="EFE800">[Yellow]</option>
<option value="05EF00">[Green]</option>
<option value="0206FF">[Blue]</option>
<option value="FFFFFF" selected>[White]</option>
</select>
</form>
</body>
</html>
此外,您实际上可以使用这些颜色的词...尝试以下 JS:
document.body.style.color = "red";
document.body.style.color = "blue";
document.body.style.color = "grey";