.getElementByClassName不起作用?

时间:2015-07-28 12:44:40

标签: javascript html

大家好:我很难让这段代码发挥作用:

HTML:

        <div id='nav_bar'>
       <ul id="ul">
<li onmouseover="test();" > <a href='friends.php' class="first"  >Friends</a>                       </li>
          <li onmouseover="test();"> <a href='messages.php' class="first">Messages</a>              </li>
          <li onmouseover="test();"> <a href='index.php' class="first">Home</a>                     </li>
          <li onmouseover="test();"> <a href='profile.php?id=<?= $prof ?>' class="first">Profile</a></li>
          <li onmouseover="test();"> <a href='find_friends.php' class="first">Search</a>            </li>
          <li onmouseover="test();"> <a href='members.php' class="first">Members</a>                </li>
          <li onmouseover="test();"> <a href='logout.php' class="first">Log Out</a>                 </li>

       </ul>
    </div>  

JAVASCRIPT:

    function test(){
x = document.getElementsByClassName("first");
x.style.backgroundColor = "#ee7600";
x.style.border = "thin solid black";
}

HTML文件正确引用了Javascript文件;我试图在导航栏中使用class =“first”更改每个元素的样式。为什么document.getElementsByClass()不起作用?

2 个答案:

答案 0 :(得分:3)

getElementsByClassName返回类似数组的实时 HTMLCollection

style是单个 HTMLElement 的属性。

循环遍历HTML集合并依次修改每个集合的样式。

for (var i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "#ee7600";
    x[i].style.border = "thin solid black";
}

答案 1 :(得分:1)

getElementsByClassName返回一个集合。对于您的示例,请尝试循环并访问循环getElementsByClassName("first")[index]中的每个元素。