在HTML中更改ID屬性的方法

Question

我正在建立一個網站，但我有一些列表元素的未排序列表。 當我單擊其中一些列表項時，我希望我的<body>的id從id="index"更改為id="collection" 。

最有效的方法是什么？

Answer 1

從純粹的JavaScript角度來看，更改主體ID的最簡單最好的方法是

document.body.id = "collection";

但是，最好使用一個類，以避免ID與頁面中的任何其他ID發生任何潛在沖突。 鑒於頁面中只有一個<body>元素，並且可以通過JavaScript中的document.body和CSS中的body進行引用，為body提供ID似乎並不是非常有用。

如果要更改頁面中的元素而不重新加載整個頁面，則JavaScript是您唯一的選擇。 如果更改對頁面功能至關重要，則還應該提供非JavaScript后備功能。

Answer 2

我應該使用JavaScript嗎？

是的，基於您希望在單擊事件期間發生這種情況的知識。 最有效的方法是

document.body.id = "collection";

效率較低的方法是

document.getElementById("index").id = "collection";

Answer 3

取決於您所說的“有效”。 使用JavaScript意味着無需更改另一個服務器的HTTP請求即可更改id ，因此用戶不必等待頁面重新加載。

但是，如果他們在單擊這些列表項之一后重新訪問或重新加載頁面，則列表將返回到加載頁面時的狀態。 對於您的上下文，這可能不是最佳選擇。

Answer 4

我將使用jQuery，並在行$('#index').attr('id', 'collection'); 。

Answer 5

document.getElementById( "index" ).id = "collection";