如何使用JavaScript將特定的類添加到鏈接

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（）方法

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 ，因此您可以使用aElements[i].className += ' btn-info'; 如果您必須支持低於10的IE版本。

如果您想為某些特定元素添加一些類，則可以使用querySelectorAll代替getElementsByTagName ，它仍然可以為您服務。 querySelectorAll返回NodeList，因此可以循環使用。

Answer 3

jQuery是您的朋友

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

 <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> 

Answer 4

謝謝大家的寶貴支持，除了像jQuery一樣工作的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>