做getElementsByClassName(等类似的功能getElementsByTagName和querySelectorAll)的工作方式相同getElementById,还是他们返回元素的数组?
我问的原因是因为我试图改变所有元素的样式getElementsByClassName.见下文.
//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';
//works
document.getElementById('myIdElement').style.size = '100px';
Run Code Online (Sandbox Code Playgroud) 我正在编写一些vanilla JavaScript来创建一个很好的导航菜单.我坚持要添加一个活跃的类.
我按类名获取元素而不是id.如果用id替换下面的代码,但是,我需要它应用于多个元素.
HTML
<img class="navButton" id="topArrow" src="images/arrows/top.png" />
<img class="navButton" id="rightArrow" src="images/arrows/right.png" />
Run Code Online (Sandbox Code Playgroud)
JS
var button = document.getElementsByClassName("navButton");
button.onmouseover = function() {
button.setAttribute("class", "active");
button.setAttribute("src", "images/arrows/top_o.png");
}
Run Code Online (Sandbox Code Playgroud)
请不要包含jQuery的答案.
我无法弄清楚如何在JavaScript中使用多个ID.单个ID和getElementById没问题,但是只要我将ID更改为类并尝试使用getElementsByClassName,该函数就会停止工作.我读过有关该主题的100篇帖子; 仍然没有找到答案,所以我希望有人知道如何使getElementsByClassName工作.
以下是我用于测试的一些简单代码:
function change(){
document.getElementById('box_one').style.backgroundColor = "blue";
}
function change_boxes(){
document.getElementsByClassName ('boxes').style.backgroundColor = "green";
}
<input name="" type="button" onClick="change(document.getElementById('box_one')); change_boxes(document.getElementsByClassName('boxes'))" value="Click" />
<div id="box_one"></div>
<div class="boxes" ></div>
<div class="boxes" ></div>
Run Code Online (Sandbox Code Playgroud)