使用Javascript将高度更改为div中的所有元素

时间:2014-04-12 21:06:49

标签: javascript html css

我有一个带有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
    }
    }

1 个答案:

答案 0 :(得分: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";
}