Question

我无法在javascript中使用添加类列表功能。这是我的html代码

 <div class="container">
 <h1><i class="fa fa-archway">  DJ Party!</i></a></h1>
 <h2>Get the party feel <i class="fa fa-air-freshener">  
 Anywhere,Anytime</i></h2>

这是我的JavaScript代码

 var h2=document.getElementsByTagName("h2");
 h2.classList.add("font");

这是我的CSS代码

 .font
  {
  font-size: 500px;
 padding:   400px;
 }

Answer 1

getElementsByTagName返回一个集合。传递索引以定位元素

var h2 = document.getElementsByTagName("h2")[0];
h2.classList.add("font");

.font {
  font-size: 100px;
  padding: 10px;
}

<div class="container">
  <h1><i class="fa fa-archway">DJ Party!</i></h1>
  <h2>Get the party feel <i class="fa fa-air-freshener">  
 Anywhere,Anytime</i></h2>

Answer 2

正如他们在答案中提到的@brk一样，getElementsByTagName返回一个集合。如果需要，还可以遍历整个集合以更改找到的每个元素。

在此示例中，如果您需要更改多个<h2>元素，这将非常有用。但是，如果您知道只有一个元素，那么@brk的答案就可以了。

var h2 = document.getElementsByTagName("h2");

for (var key in h2) {
    var element = h2[key];
    if (element.classList !== undefined) element.classList.add("font");
}

.font {
  font-size: 100px;
  padding: 10px;
}

<div class="container">
  <h1><i class="fa fa-archway">DJ Party!</i></h1>
  <h2>Get the party feel <i class="fa fa-air-freshener">  
 Anywhere,Anytime</i></h2>
 
 <div class="container">
  <h1><i class="fa fa-archway">DJ Party!</i></h1>
  <h2>Get the party feel <i class="fa fa-air-freshener">  
 Anywhere,Anytime</i></h2>
 
 <div class="container">
  <h1><i class="fa fa-archway">DJ Party!</i></h1>
  <h2>Get the party feel <i class="fa fa-air-freshener">  
 Anywhere,Anytime</i></h2>

VM323：1未捕获的TypeError：无法读取未定义的属性“ add”

2 个答案: