更改多个元素的风格与同等级

所以此刻我是HREF元素

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

和更多的元素。

多个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并更改该元素的所有样式。

来源

2017-06-18 Nathan

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的多个元素。

来源

2017-06-18 06:59:53 gauravmuk

谢谢，这对我来说真的很好！ – Nathan

很高兴提供帮助，如果此答案解决了您的问题，请通过单击答案旁边的复选标记将其标记为已接受。 – gauravmuk

您必须了解类和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");

OK，所以为了选择所有使用特定类别的元素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选择的类选择。它的工作原理，但不应该使用！

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

来源

2017-06-18 16:00:09 PeterMader

更改多个元素的风格与同等级

回答

相关问题