Question

我正在学习JavaScript，我设法改变了背景颜色：

<script>
     function changecolor(id,color) {
            id.style.backgroundColor=color;
     }
</script>


<div id="container">
     <p> Select Color to change background:</p>
     <select id="themenu" onchange="changecolor(container,themenu.value)">
          <option value="white"> </option>
          <option value="red">RED</option>
          <option value="blue">BLUE</option>
          <option value="green">GREEN</option>
     </select>
</div>

有没有其他方法可以做到这一点？

Answer 1

你可能只是陷入了语法

<select id="themenu" onchange="changecolor(container,this.value)"> <!-- Change -->
 <option value="white"> </option>
 <option value="red">RED</option>
 <option value="blue">BLUE</option>
 <option value="green">GREEN</option>
</select>

this.value指的是当前对象的选定值！

themenu.value也可以正常工作，你可能会卡在其他地方！

Demo Update

Another Js Fiddle

Answer 2

我刚刚调用了父元素并且它完美地工作。

onchange="changecolor(this.parentNode,themenu.value)"

Demo

Answer 3

你的javascript函数应该是这个;

function changecolor(id,color){
  document.getElementById(id).style.backgroundColor=color;
}

Answer 4

你应该简单地引用当前对象（this），然后引用它的父节点及其值，而不是使用id：

<script>
    function useValueAsParentColor(menu) {
        menu.parentNode.style.backgroundColor = menu.value;
    }
</script>

<div>
    <p> Select Color to change background:</p>
    <select onchange="useValueAsParentColor(this); ">
        <option value="white"> </option>
        <option value="red">RED</option>
        <option value="blue">BLUE</option>
        <option value="green">GREEN</option>
    </select>
</div>

用选择标记更改网站的背景图像

4 个答案: