javascript 在html中更改id属性的方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4784843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ways to change id attribute in html
提问by thikonom
I'm building a website and I have an unsorted list with some list elements. When I click on some of these list items I want my <body>'s id to change from id="index"to id="collection".
我正在构建一个网站，我有一个包含一些列表元素的未排序列表。当我单击其中一些列表项时，我希望我<body>的 id 从 更改id="index"为id="collection"。
What's the most efficient way to do that?
最有效的方法是什么？
- Should I use JavaScript?
- Should I put all the body code in a
{% block %}and override it when I click on the special list items? - An other way?
- 我应该使用 JavaScript 吗？
- 我应该将所有正文代码放在 a 中
{% block %}并在单击特殊列表项时覆盖它吗？ - 其他方式？
回答by Tim Down
From a purely JavaScript persepctive, the simplest and best way of changing the body's ID is
从纯 JavaScript 的角度来看，更改主体 ID 的最简单和最好的方法是
document.body.id = "collection";
However, you may be better off using a class to avoid any potential conflict of your ID with any other ID in the page. Giving the body an ID doesn't seem terribly useful given that there is only one <body>element in the page and it can be referenced via document.bodyin JavaScript and bodyin CSS.
但是，最好使用类以避免您的 ID 与页面中的任何其他 ID 发生任何潜在冲突。鉴于<body>页面中只有一个元素，并且可以通过document.bodyJavaScript 和bodyCSS引用它，因此为正文提供 ID 似乎并不是很有用。
If you want to change an element in the page without reloading the whole page then JavaScript is your only option. If the change is vital to the functionality of your page, you should also provide a non-JavaScript fallback.
如果您想在不重新加载整个页面的情况下更改页面中的元素，那么 JavaScript 是您唯一的选择。如果更改对您的页面功能至关重要，您还应该提供非 JavaScript 回退。
回答by Andy E
Should I use JavaScript?
我应该使用 JavaScript 吗？
Yes, based on the knowledge that you want this to happen during a click event. The most efficient way would be
是的，基于您希望在单击事件期间发生这种情况的知识。最有效的方法是
document.body.id = "collection";
a less efficient way would be
一种效率较低的方法是
document.getElementById("index").id = "collection";
回答by Paul D. Waite
Depends what you mean by “efficient”. Using JavaScript means the idgets changed without another HTTP request being made to your server, so the user doesn't have to wait for the page to reload.
取决于你所说的“高效”是什么意思。使用 JavaScript 意味着id无需向您的服务器发出另一个 HTTP 请求即可更改，因此用户不必等待页面重新加载。
However, if they revisit or reload the page after clicking on one of these list items, the list will go back to the way it was when the page was loaded. That might not be optimal for your context.
但是，如果他们在单击这些列表项之一后重新访问或重新加载页面，则列表将返回到页面加载时的状态。这可能不是您的上下文的最佳选择。
回答by chaos
I would do it using jQuery, with the line $('#index').attr('id', 'collection');.
我会使用 jQuery 来完成它，并带有$('#index').attr('id', 'collection');.
回答by Sparafusile
document.getElementById( "index" ).id = "collection";
