更改多個元素的風格與同等級

所以此刻我是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

更改多個元素的風格與同等級

回答

相關問題