Question

这是我练习的情况。现在，我只是在Javascript的开头。我正在我的控制台内练习这个，而且我有一个我需要弄清楚的墙。

我想要做的只是在Chrome控制台内部进行简单的CSS样式更改。这是我到目前为止所拥有的

var get = document.getElementById('ul-li-menu');

然后我在我调用的变量中获取了我的垂直菜单的li的uls和锚点的完整列表。

我通过下面的代码访问我想要的锚标签。

var li = get.getElementsByTagName('a');

现在我有一大堆我知道的东西我只需要在控制台中调用这个变量。

li

这是我很困惑的事情。我想，只是为了练习，改变所有这些锚标签的显示。

这是我最初编写的代码。

li.style.display = "inline";

但这不起作用。

我不想使用括号表示法访问此数组中的每个单独元素，如[0]或[3]。

这个数组中有大约13个这样的锚元素，我想一次访问所有这些，以将显示更改为内联。有没有办法做到这一点？

先谢谢你，伙计们。

Answer 1

只需通过for循环。

for(var i = 0; i < li.length; i++){
    li[i].style.display = "inline";
}

Answer 2

如果没有JQuery，您需要遍历数组中的每个对象

Answer 3

我建议您使用JQuery来实现更快的方法：

$("button").click(function(){
  if($("li").css("display") == "table"){
    $("li").css("display","inline-block");
  }
  else{
    $("li").css("display","table");
  }
});

li {
  display: table;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button type="button">Change Style</button>

Answer 4

您需要循环浏览它们并单独设置每个。如果你正在使用jQuery或es6，你可以用更简洁的方式做到这一点，但这里是你如何使用简单的ol＆＃39; JavaScript的。

var listItems = document.getElementById('theUlElement').getElementsByTagName('li');

for (var li = 0; li < listItems.length; li ++){
  listItems[li].style.display = "inline";
}

Answer 5

您可以使用Javascript动态添加自定义CSS样式规则。锚标签..

//语法

// stylesheet.addRule（rule，index）;

Answer 6

对数组的每个元素执行相同操作的另一个有用选项是forEach。很遗憾，您的变量li不是数组，而是NodeList，而forEach为has limited browser support。

也就是说，你可以毫不费力地在你的NodeList上使用forEach的数组版本！这适用于IE9 +：

[].forEach.call(li, function(item) {
    item.style.display = 'inline';
});
// Array.prototype.forEach.call(...) would also work.

如果您不关心浏览器支持，可以使用NodeList native forEach：

li.forEach(function(item) {
    item.style.display = 'inline';
});

一次调用数组内的多个元素？

6 个答案:

//语法