如何使用 JS 將樣式修改為 HTML 元素（使用 CSS 外部樣式）？

Question

因此，當我單擊家庭類的<p>標記時，我希望它將顏色更改為綠色，但它不起作用，我知道為什么。 點擊注冊很好（因為 console.log("test") 顯示得很好）但是改變顏色的其余功能將不起作用。 這是我的 css、html 和 js 代碼（js 代碼包含在 HTML 中，所以它不是外部文件或任何東西）：

 function selectHome() { console.log("test"); document.getElementsByClassName("home").style += "background-color:green;"; }

 .greyRect { height: 150px; width: 1350px; background-color: #D3D3D3; } h1 { text-align: center; } h2 { text-align: center; } .home { box-sizing: border-box; width: 80px; height: 35px; line-height: 2; position: relative; left: 350; color: white; } .casinocraps { background-color: grey; box-sizing: border-box; width: 120px; height: 35px; text-align: center; line-height: 2; position: relative; left: 460; bottom: 50; color: white; } .tictactoe { background-color: grey; box-sizing: border-box; width: 90px; height: 35px; text-align: center; line-height: 2; position: relative; left: 600; bottom: 100; color: white; } .bingo { background-color: grey; box-sizing: border-box; width: 80px; height: 35px; text-align: center; line-height: 2; position: relative; left: 700; bottom: 150; color: white; } .concentration { background-color: grey; box-sizing: border-box; width: 100px; height: 35px; text-align: center; line-height: 2; position: relative; left: 800; bottom: 200; color: white; } footer { text-align: center; line-height: 4; position: relative; top: 125; right: 15; height: 70px; width: 1365px; background-color: #D3D3D3; } .border { height: 50px; width: 100px; border: 4px solid green; background-color: #555; position: relative; top: 20; left: 100; } .rectangle { height: 50px; width: 100px; background-color: #555; position: relative; top: 50; left: 100; }

 <header class="greyRect"> <h1>Assignment 1</h1> <h2>Home Page</h2> <nav> <p class="home" onclick="selectHome()"> Home </p> <p class="casinocraps"> <b>Casino Craps</b> </p> <p class="tictactoe"> <b>Tic-Tac-Toe</b> </p> <p class="bingo"> <b>Bingo</b> </p> <p class="concentration"> <b>Concentration</b> </p> </nav> <div class="border"> </div> <footer>Footer</footer> </header>

Answer 1

其他人建議.getElementsByClassName("home")[0] ，這是一個糟糕的主意。

首先， .getElementsByClassName()返回所有匹配元素的節點列表。 如果您只對第一個感興趣，那么找到那個然后繼續掃描更多匹配項然后丟棄除找到的第一個之外的所有匹配項是沒有意義的，這就是這段代碼的作用。

其次， .getElementsByClassName()返回一個“活動”節點列表。 這意味着每次與列表交互時，都會再次搜索整個 DOM 以查找匹配項，以確保您在列表中設置了最新的。 這在動態添加和刪除節點的應用程序中很有用，但這些用例並不常見。

僅供參考： .getElementsByTagName() 、 .getElementsByName()和node.childNodes也返回活動節點列表。

所有這些前面提到的方法都可以追溯到 DOM API 的早期，當時它仍然是 Web 開發的“狂野西部”時代。 它們都有二十多年的歷史，並且今天有更好的選擇（即.querySelector() 、 .querySelectorAll() 、 .closest() ）。

當不需要保持最新列表時， .querySelectorAll()是要走的路。 坦率地說，即使您確實需要更新的節點列表，您仍然最好使用.querySelectorAll()並在需要更新列表的地方再次手動運行它。

這是一個討論這個的好頁面，這就是它要說的：

如何考慮活體？

活體不直觀。 您可以將其視為延遲評估或惰性評估。 訪問結果時重新計算活動對象的方法或屬性。

---

但是，在這種情況下，我們甚至不需要節點列表，我們只需要一個節點。 正確的解決方案是：

document.querySelector(".home");

.querySelector()掃描文檔以查找與提供的選擇器匹配的第一個元素，如果找到，則返回對該單個節點的引用。 否則，它返回undefined 。

Answer 2

像這樣做：

JS：

function selectHome() {
  document.getElementsByClassName("home")[0].style.backgroundColor = "green";
}

HTML：

<p class="home" onclick="selectHome()">
  Home
</p>

Answer 3

.style 實際上是一個 js 對象，其鍵對應於 css 屬性。

正如阿達什所說

document.getElementsByClassName("home")[0].style.backgroundColor = "green"

編輯- 不要這樣做。 正如斯科特馬庫斯解釋的那樣，這非常糟糕。 絕對應該使用 querySelector('.home') 來獲取元素。

一般來說，如果一個屬性有一個像背景顏色這樣的連字符，你可以把它轉換成駝峰式，即backroundColor

查看MDN - HTMLElement.style