我刚刚编写了一个非常简单的代码,它从一个选择元素中获取一个颜色值,并使用它来设置特定类中元素的边框颜色,但它似乎不起作用。这是代码:
HTML:
<select id="colorSelect" onChange="changeColor()">
<option value="#000000" selected="selected">Black</option>
<option value="#0000FF">Blue</option>
<option value="#FF0000">Red</option>
</select>
与红色和蓝色格式相同的选项有更多,但为了节省空间,我将它们省略了。
这是 JavaScript:
function changeColor
{
var picker = document.getElementById("colorSelect");
var colorName = picker.options[picker.selectedIndex].value;
document.getElementByClassName("bordered").style.backGroundColor=colorName;
}
最佳答案
几个问题,
首先是您在函数声明中缺少 ()
,它应该是:
function changeColor() {
}
第二个是 getElementByClassName
是 getElementsByClassName
(注意 Elements 末尾的“s”)- 这将返回一个集合,因此您必须指定索引:
document.getElementsByClassName("bordered")[0].style.backGroundColor=colorName;
此外,(感谢@AmmarCSE 看到了这个)- 您所追求的 style
属性是 backgroundColor
- 而不是 backGroundColor
(JS 是非常区分大小写)
另一个重要的注意事项是在开发时始终打开控制台,您将能够看到发生了什么错误以及发生在哪里。 (通常 F12 在大多数浏览器上打开控制台)
关于javascript - 选择元素不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32083269/