Question

我正在尝试制作元素的交互式元素周期表。单击按钮时，我需要使用<td>更改classname "nemetale"更多的背景颜色。它不起作用，我不知道我做错了什么。

有按钮

 <button onclick="document.getElementsByClassName('.nemetale').style.backgroundColor = 'red';">Nemetale</button>

有一个<td>s。

<table class="tabel_periodic">
  <!--Randul 1-->
  <tr>

   <td class="nemetale">
    <strong>1</strong><br>
    <acronym>H</acronym><br>
    <em>Hidrogen</em><br>
    <i>1,008</i>
   </td>
 ...

Answer 1

<强> Working fiddle

getElementsByClassName（）：返回具有所有给定类名的所有子元素的类数组对象。

功能.getElementsByClassmame()不存在，您应该使用 .getElementsByClassName() 。

由于.getElementsByClassName()会返回一个元素列表，您应该使用[0]来返回第一个元素，如：

document.getElementsByClassName('nemetale')[0].style.backgroundColor  = 'red';

var trs = document.getElementsByClassName('nemetale');

document.getElementById('change_color').addEventListener('click', function() {
  for (var i = 0; i < trs.length; i++) {
    changeColor(trs[i]);
  }
});

function changeColor(tr) {
  tr.style.backgroundColor = 'red';
}

<button id="change_color">Nemetale</button>

<table class="tabel_periodic">
  <tr>
    <td class="nemetale">
      <strong>1</strong><br>
      <acronym>H</acronym><br>
      <em>Hidrogen</em><br>
      <i>1,008</i>
    </td>
  </tr>
  <tr>
    <td class="nemetale">
      <strong>2</strong><br>
      <acronym>H</acronym><br>
      <em>Hidrogen</em><br>
      <i>2,008</i>
    </td>
  </tr>
  <tr>
    <td class="nemetale">
      <strong>3</strong><br>
      <acronym>H</acronym><br>
      <em>Hidrogen</em><br>
      <i>3,008</i>
    </td>
  </tr>
</table>

Answer 2

两件事：

首先，您调用的函数中存在拼写错误。它应该是getElementsByClassName()。

其次，getElementsByClassName()返回NodeList。这与“数组”相似，但这意味着您必须从NodeList中选择每个项目。

如果只有一个元素，你可以这样做 document.getElementsByClassName('nemetale')[0].style.backgroundColor = 'red';

如果有多个元素，则必须遍历这些项目。我建议把它变成一个功能。

<button onclick="highlight">Nemetale</button>

function highlight() {
    var items = document.getElementsByClassName('nemetale');

    Array.from(items).forEach(function(item) {
        item.style.backgroundColor = 'red';
    });
}

如果您使用的是ES6，也可以缩短它：

function highlight() {
    const items = document.getElementsByClassName('nemetale');

    Array.from(items).forEach(item => item.style.backgroundColor = 'red');
}

Answer 3

你有一个拼写错误： getElementsByClassmame ，这不是一个有效的JS方法。

改为使用.querySelector：

document.querySelector('.nemetale')

https://jsfiddle.net/d5dg0uw4/

Answer 4

通过添加功能使其如下所示：

<button onclick="changeBackgroundColor()">Nemetale</button>

把它放进

<script>
  function changeBackgroundColor(){
    document.getElementsByClassName('nemetale')[0].style.backgroundColor = 'red';
  }
</script>

按钮改变颜色

4 个答案: