当 select 颜色的列表选项被 select 编辑时如何更改文档背景颜色
How to change the document background color when select list option for that color is selected
function change_color() {
var getSelect = document.getElementsByName("colorPick");
var selection = getSelect.options[getSelect.selectedIndex].value;
for (i = 0; i < getSelect.options.length; i++) {
document.body.style.backgroundColor = selection;
}
}
<select name="colorPick" onchange="change_color();">
<option value="0">Background Color</option>
<option value="1">Blue</option>
<option value="2">Cyan</option>
<option value="3">White</option>
</select>
/出了点问题。我尝试了很多不同的东西,但是当我 select 一种颜色时似乎没有任何效果。/
您的代码无法正常工作,因为 getElementsByName
returns 元素的 nodeList 集合。您需要访问其中一个元素,因为您无法获取集合的值。
document.getElementsByName("colorPick")[0]; // First element
您可以通过传递 select 元素的上下文来避免这种情况:onchange="change_color(this)"
.
在更改背景颜色方面,您需要将 body
元素的背景颜色设置为 selected 元素的 text。不是值。
function change_color(select) {
var color = select.options[select.selectedIndex].textContent;
document.body.style.backgroundColor = color;
}
<select name="colorPick" onchange="change_color(this);">
<option value="0">Background Color</option>
<option value="1">Blue</option>
<option value="2">Cyan</option>
<option value="3">White</option>
</select>
虽然我建议使用 unobtrusive JavaScript:
document.querySelector('[name="colorPick"]').addEventListener('change', function () {
var color = this.options[this.selectedIndex].textContent;
document.body.style.backgroundColor = color;
});
<select name="colorPick">
<option value="0">Background Color</option>
<option value="1">Blue</option>
<option value="2">Cyan</option>
<option value="3">White</option>
</select>
它是这样工作的:
<body>
<select name="colorPick" onchange="change_color();">
<option value="0">Background Color</option>
<option value="Blue">Blue</option>
<option value="Cyan">Cyan</option>
<option value="White">White</option>
</select>
</body>
javascript:
function change_color() {
var getSelect = document.getElementsByName("colorPick");
var selection = getSelect[0].options[getSelect[0].selectedIndex].value;
for (i = 0; i < getSelect[0].options.length; i++) {
document.body.style.backgroundColor = selection;
}
}
function change_color() {
var getSelect = document.getElementsByName("colorPick");
var selection = getSelect.options[getSelect.selectedIndex].value;
for (i = 0; i < getSelect.options.length; i++) {
document.body.style.backgroundColor = selection;
}
}
<select name="colorPick" onchange="change_color();">
<option value="0">Background Color</option>
<option value="1">Blue</option>
<option value="2">Cyan</option>
<option value="3">White</option>
</select>
/出了点问题。我尝试了很多不同的东西,但是当我 select 一种颜色时似乎没有任何效果。/
您的代码无法正常工作,因为 getElementsByName
returns 元素的 nodeList 集合。您需要访问其中一个元素,因为您无法获取集合的值。
document.getElementsByName("colorPick")[0]; // First element
您可以通过传递 select 元素的上下文来避免这种情况:onchange="change_color(this)"
.
在更改背景颜色方面,您需要将 body
元素的背景颜色设置为 selected 元素的 text。不是值。
function change_color(select) {
var color = select.options[select.selectedIndex].textContent;
document.body.style.backgroundColor = color;
}
<select name="colorPick" onchange="change_color(this);">
<option value="0">Background Color</option>
<option value="1">Blue</option>
<option value="2">Cyan</option>
<option value="3">White</option>
</select>
虽然我建议使用 unobtrusive JavaScript:
document.querySelector('[name="colorPick"]').addEventListener('change', function () {
var color = this.options[this.selectedIndex].textContent;
document.body.style.backgroundColor = color;
});
<select name="colorPick">
<option value="0">Background Color</option>
<option value="1">Blue</option>
<option value="2">Cyan</option>
<option value="3">White</option>
</select>
它是这样工作的:
<body>
<select name="colorPick" onchange="change_color();">
<option value="0">Background Color</option>
<option value="Blue">Blue</option>
<option value="Cyan">Cyan</option>
<option value="White">White</option>
</select>
</body>
javascript:
function change_color() {
var getSelect = document.getElementsByName("colorPick");
var selection = getSelect[0].options[getSelect[0].selectedIndex].value;
for (i = 0; i < getSelect[0].options.length; i++) {
document.body.style.backgroundColor = selection;
}
}