Question

所以目前我有一个 的JavaScript

    <a href"..." class="site-nav__link" id="site-nav__link-id">Home</a>
    <a href"..." class="site-nav__link" id="site-nav__link-id">All Collections</a>
    <a href"..." class="site-nav__link" id="site-nav__link-id">Blog</a>
    <a href"..." class="site-nav__link" id="site-nav__link-id">About us</a>

和更多元素是href元素。

更多java

function testFunction() {
var elem = document.getElementById("AccessibleNav");
var linkId = document.getElementById("site-nav__link-id");
if(document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {

elem.style.backgroundColor = "#333";
elem.style.width = "105%";
elem.style.textAlign = "center";
elem.style.left = "0px";
elem.style.fontColor = "white";
elem.style.position = "fixed";
linkId.style.color = "white";

} else {
elem.style.backgroundColor = "";
elem.style.width = "";
elem.style.textAlign = "";
elem.style.left = "";
elem.style.color = "white";
elem.style.position = "static";
}
}

在这段代码中我非常想说当我滚动100px如果它没有滚动它会做到最顶层它会做到底部。

因此，当我执行linkId.style.color = "white"或<br> document.getElementById("site-nav__link-id").style.color = 'white'"时，它只会将1个元素作为第一个元素，或者将该元素称为白色元素。我需要他们所有人变成白色。有人有解决方案吗？让我能够定位类并更改所有元素的样式或定位id并更改所有元素的样式。

Answer 1

var el = document.querySelectorAll('#site-nav__link-id');

for (var i = 0; i < el.length; i++) {
    var currentEl = el[i];
    currentEl.style.color = 'white';
}

您需要使用querySelectorAll来获取具有相同ID的多个元素。

Answer 2

您必须了解类和ID之间的区别。 HTML标记元素中的类具有共同点（类似样式，类似行为，......）。但是，ID唯一地标识DOM中的元素，这意味着您应该只有一个具有特定ID的元素。

id全局属性定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。

来自MDN。

这就是document.getElementById未被称为document.getElementsById的原因。对于类，您有document.getElementsByClassName，以选择具有特定类属性的所有元素。

顺便说一句，这称为HTML：

<!-- You were missing a '=' before the "...". -->
<!-- Don't use IDs for multiple elements! -->
<a href="..." class="site-nav__link">Home</a>
<a href="..." class="site-nav__link">All Collections</a>
<a href="..." class="site-nav__link">Blog</a>
<a href="..." class="site-nav__link">About us</a>

...这叫做JavaScript，不是Java ：

var elem = document.getElementById("AccessibleNav");

好的，所以为了选择特定类的所有元素，请使用document.getElementsByClassName：

function makeThemWhite () {
  var elements = document.getElementsByClassName('site-nav__link');

  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    element.style.color = 'white';
  }
}

document.getElementById('make-them-white').addEventListener('click', makeThemWhite);

a {
  background-color: green;
}

<a href="..." class="site-nav__link">Home</a>
<a href="..." class="site-nav__link">All Collections</a>
<a href="..." class="site-nav__link">Blog</a>
<a href="..." class="site-nav__link">About us</a>

<button id="make-them-white">Make them white!</button>

你可以使用document.querySelectorAll来实现同样的效果，就像@gauravmuk所做的那样：

var elements = document.querySelectorAll('.site-nav__link-id');

但是使用类选择器而不是id选择器。它有效，但不应该使用！

我希望我能让你的事情更清楚。

Answer 3

使用当前的 JS 功能（for of）有一种简单的方法可以做到这一点：

   var elements = document.getElementsByClassName('class_name');
   for (let element of elements) { 
       element.style.color = "cyan";
       element.style.display = "initial";
   }

只需将 class_name 替换为您要选择的类。如果您只需要更改一种样式，您可以将整个内容压缩为两行：

   var elements = document.getElementsByClassName('class_name');
   for (let element of elements) { element.style.display = "none"; }

使用相同的类

3 个答案: