如何在id函数上应用class函数？

初学者阿里比

所以我有一个任务要为每个段落（其中五个）创建功能（显示/隐藏），我确实喜欢

function btn() {
    var x = document.getElementById('para');
    if (x.style.display == "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

对于每个段落，我都使用Id代替了class。因为任务说每一段一个按钮。

现在我有一个问题，如何同时应用所有这些（颜色）功能。

function color() {
    bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);
    elements = document.getElementByClassName('color');

    for (var i = 0; i < elements.length; i++) {
        document.getElementByClassName('color')[i].style.backgroundColor = bgColorCode;
    }
}

//Html
<button onclick = "color()">Color</button>
<button onclick = "btn()">Show/Hide</button>
<p id = "para"> Example 1 </p>

<button onclick = "btn2()">Show/Hide</button>
<p id = "para2"> Example 2 </p>
...

idk如何将此功能“ color”应用于我的所有段落，因为它们都在id下？

有什么办法吗？

马克·拜恩斯

如果将类添加color到para元素中，然后将函数更改getElementByClassName()为getElementsByClassName()（您忘记了s）。那么您的代码就可以了。在for循环中，可以使用elements数组elements[i]而不是对该getElementsByClassName()函数的另一个调用。

function color() {
  bgColorCode = '#' + Math.floor((Math.random() * 999999) + 100000);
  elements = document.getElementsByClassName('color');

  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = bgColorCode;
  }
}

//just slightly modified so it works with multiple paragraphs by making the id a function parameter.
function btn(id) {
  var x = document.getElementById(id);
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<button onclick="color()">Color</button>
<button onclick="btn('para')">Show/Hide</button>
<p class="color" id="para">Example 1</p>

<button onclick="btn('para2')">Show/Hide</button>
<p class="color" id="para2">Example 2</p>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。