我在一行上有一个不同颜色的下拉列表，当选择列表时，我想将该行上的文本颜色值更改为选择的值。 每一行都有一个下拉列表字段，每次用户选择下拉列表时，该下拉列表上的所有字段都会更改相同的颜色。
<html>
<head>
<script type="text/javascript">
function updateTextColour(value) {
if (dropdownList.value > 0) {
dropdownList.style.color = 'red';
//document.body.style.color = '#' + value;
} }
</script>
<style type="text/css">.style1 {color: #FF0000;}</style
</head>
<body>
<form>Change the text color: <br>
<table>
<tr>
<td id="1" style="width:40px">1</td>
<td id="1" style="width:180px" class="style7">
<span class="style1"><span class="style1">
<select name="backGround" size="1" onChange="updateTextColour(this.value);"><!--changeColor(this.selected);"-->
<option value="FF0400" style="color:red">[Red]</option>
<option value="05EF00" style="color:Green">[Green]</option>
<option value="0206FF" style="color:Blue">[Blue]</option>
<option value="000000" selected>[black]</option>
</select></span></span></td>
<td "width:auto" class="style8">Need to change to color row 1</td>
<br><br></tr>
<table>
<tr>
<td id="2" style="width:40px">2</td>
<td id="2" style="width:180px" class="style7">
<span class="style1"><span class="style1">
<select name="backGround2" size="1" onChange="updateTextColour(this.value);"><!--changeColor(this.selected);"-->
<option value="000000">[Black]</option>
<option value="FF0400" style="color:red">[Red]</option>
<option value="EFE800" style="color:Yellow">[Yellow]</option>
<option value="05EF00" style="color:Green">[Green]</option>
<option value="0206FF" style="color:Blue">[Blue]</option>
<option value="FFFFFF" selected>[White]</option>
</select></span></span> </td>
<td "width:auto" class="style8">Need to change to color row 2</td>
</tr>
</table></table>
</form>
</body>
最佳答案
您需要更改 Javascript 才能使其正常工作。
使用这个 Javascript
function updateTextColourrow1(value){
document.getElementsByClassName("style8")[0].style.color="#"+value;
}
function updateTextColourrow2(value){
document.getElementsByClassName("style8")[1].style.color="#"+value;
}
我使用了两个函数来分别访问这两行。这也可以仅使用一个函数来完成。
Era800 的方法。
JS
function updateTextColour(sender) {
var tempie = sender; //the dropdown list object
//Find the table row of the dropdown list.
while (tempie.parentNode.nodeName != 'TR') {
tempie = tempie.parentNode;
}
//Get the selected color.
var selectedColor = '#' + sender.value;
//Set the row to the selected color.
tempie.parentNode.style.color = selectedColor;
}
era800 发布的脚本需要做一点小改动，您需要在 var selectedvalue 前加上“#”前缀。
关于javascript - 在每行的下拉列表中更改选择时更改文本颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18426401/