javascript - 使用 Javascript 更改 div 中所有元素的高度

Question

我有一个带有 ID 的 ul 标签，点击一个按钮我想更改 div 本身的高度和显示，对于该 div 内的每个标签也是如此。

我无法选择每个标签并更改它们的样式。

我只想使用 javascript。

我的标记

 <ul id="mobile_nav" >
     <a href="about.html" class="images" ><li><p>about me</p></li></a>
     <a href="work.html" class="images"><li><p>work</p></li></a>
     <a href="letstalk.html" class="images"><li   ><p>let's talk</p></li></a>
 </ul>

我的js

       var but = document.getElementById('mobile_menu')
        but.onclick=function() {
                var ul = document.getElementById('mobile_nav')
            var a = document.getElementById('mobile_nav').getElementsByTagName('a');
            console.log(ul) //SEEMS TO WORK
            console.log(a) //AS ABOVE
                console.log(typeof(a)) // THAT S AN OBJECT
            ul.style.display="block" // THAT S WORK
            ul.style.height="auto";//WORKING
          //TRYING TO GO THOUGHT MY OBJECT AND CHANGE HEIGHT
                for (var x in a) {
               a[x].style.height="42px";//IT SAID PROPERTY OF UNDEFINED
               console.log('done')// IT S PRINTING THAT AS MANY AD MY A TAGS
               console.log(a[x].)// NUMBER OF A TAGS IN MY DIV
    }
    }

Answer 1

如您所写，您会找到所有您想要的元素:

var elements = document.getElementById('mobile_nav').getElementsByTagName('a');

上面的结果是NodeList。你可以这样遍历它:

for (var i = 0, len = elements.length; i < len; i++){
   elements[i].style.height = "25px";
}