Question

这里我试图使用纯javascript隐藏多个href元素：

document.getElementById('test').onmouseover = function() {  document.getElementsByClassName('dropDown').setAttribute(
    "style", "display:block;");
                                                        } 
document.getElementsByClassName('dropDown').onmouseout = function() { document.getElementsByClassName('dropDown').setAttribute(
    "style", "display:none;");
                                                        } 

.hideDropDown {
   z-index:9999; 
    display:none; 
    position: absolute; 
    background-color:red
}

.displayDropDown {
   z-index:9999; 
    display:block; 
    position: absolute; 
    background-color:red
}

document.getElementById('test').onmouseover = function() {  document.getElementsByClassName('dropDown').setAttribute(
    "style", "display:block;");
                                                        } 
document.getElementsByClassName('dropDown').onmouseout = function() { document.getElementsByClassName('dropDown').setAttribute(
    "style", "display:none;");
                                                        }

http://jsfiddle.net/w55yubtc/24/

但是错误Uncaught TypeError: document.getElementsByClassName(...).setAttribute is not a function正在抛出。如何使用纯javascript设置多个元素的样式？在这种情况下隐藏/显示href元素？

Answer 1

document.getElementsByClassName(...)提供NodeList，array-like个对象。如果您想使用.setAttribute，则必须循环使用它：

for (var i=0; i < myNodelist.length; i+=1) {
  myNodelist[i].setAttribute( ... );
}

无论如何，你可以使用根本没有脚本来解决这个问题：

.dropDown {
    background-color: yellow;
    margin-top: 0.5em;
    display: none;
}

li[data-hover]:hover > .dropDown {
    display: inline-block;
}

<li data-hover="true">
  <a id="test" href="www.google.com">Hello</a>
  <br>    
  <a class="dropDown" href="www.google.com">Hello</a>
  <a class="dropDown" href="www.google.com">Hello2</a>
</li>

Answer 2

另一种方法是使用querySelectorAll和CSS类而不是style属性。 querySelectorAll的优点是你可以拥有比类更多的控件，使用CSS类可以避免直接访问style属性的冲突。

var hideList = document.querySelectorAll("a.test, a.dropDown");
var i;
for (i = 0; i < hideList.length; i++) {
    if (hideList[i].className.indexOf("hidden") === -1) {
        hideList[i].className += " hidden";
    }
}

Answer 3

document.getElementById('test').onmouseover = function () {
    var els = document.getElementsByClassName('dropDown');
    for (var i = 0; i < els.length; i++) {
        els[i].setAttribute("style", "display:block;");
    }
}

document.getElementsByClassName('dropDown')[1].onmouseout = function () {
    var els = document.getElementsByClassName('dropDown');
    for (var i = 0; i < els.length; i++) {
        els[i].setAttribute("style", "display:none;");
    }
}

JSFiddle

P.S。 此解决方案仅适用于此问题，此方法有更好的解决方案（仅限css）

显示使用javascript隐藏多个href元素

3 个答案: