Question

我正在尝试使用JS向页面中的所有链接添加一个特定的类，但我不能使用getElementById方法，因为有几个链接，我想为每个链接添加一个特定的类他们我怎么能这样做

<div class="container-fluid">
<a href="#" class="btn  btn-lg" >Download</a>
<a href="#" class="btn  btn-lg" >Download</a>
<a href="#" class="btn  btn-lg" >Download</a>
<a href="#" class="btn  btn-lg" >Download</a>
<a href="#" class="btn  btn-lg" >Download</a>
<a href="#" class="btn  btn-lg" >Download</a>
</div>

我想使用JavaScript将btn-info添加到所有链接，我该怎么办？

Answer 1

出于此目的使用document.querySelectorAll()方法。它允许您以多种不同方式自由选择元素。主要类型基于类，id或元素名称。它可以很容易地用作var elements = document.querySelectorAll(".className")。其中classname是您要使用的类的名称。

有关详细信息，请参阅querySelectorAll（）方法，访问HTML DOM querySelector() Method

Answer 2

首先，您必须使用元素方法getElementsByTagName获取所有链接，它将返回HTMLCollection所需的所有元素，然后您可以遍历它并为每个元素添加类。

var aElements = document.getElementsByTagName('A');
for (var i = 0; i < aElements.length; i++) {
  aElements[i].classList.push('btn-info');
}

IE 10支持

classList，因此如果您必须支持低于10的IE版本，则可以使用aElements[i].className += ' btn-info';。

如果您想为更具体的元素添加一些课程，可以使用querySelectorAll代替getElementsByTagName，它仍适用于您。 querySelectorAll返回NodeList，因此可以循环使用。

Answer 3

JQuery是你的朋友

＆＃13;

$('.btn').addClass('newClass');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid">
    <a href="#" class="btn  btn-lg">Download</a>
    <a href="#" class="btn  btn-lg">Download</a>
    <a href="#" class="btn  btn-lg">Download</a>
    <a href="#" class="btn  btn-lg">Download</a>
    <a href="#" class="btn  btn-lg">Download</a>
    <a href="#" class="btn  btn-lg">Download</a>
</div>

＆＃13;

Answer 4

感谢您的宝贵支持除了Jquery工作就像一个魅力我的代码工作在js如下所示

<div class="container-fluid">
    <a href="#" class="btn  btn-lg" >Download</a>
    <a href="#" class="btn  btn-lg" >Download</a>
    <a href="#" class="btn  btn-lg" >Download</a>
    <a href="#" class="btn  btn-lg" >Download</a>
    <a href="#" class="btn  btn-lg" >Download</a>
    <a href="#" class="btn  btn-lg" >Download</a>
</div>

<script type="text/javascript">

var elements = document.querySelectorAll(".btn ");
var i;
for (i = 0; i < elements.length; i++)
{
    elements[i].classList.add("btn-info");
}
</script>

如何使用Javascript将特定类添加到链接

4 个答案: