Javascript 如何用javascript替换类HTML名称
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8708826/
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
how to replace class HTML name with javascript
提问by user1064634
ok so what I'm trying to do is to get the element's with the class name 'no-js' and replace it with 'js', so I have NO idea how to do this, I tried google around But couldn't find anything, so does anyone now how to do this?
好的，所以我想要做的是获取类名称为“no-js”的元素并将其替换为“js”，所以我不知道该怎么做，我尝试了谷歌搜索但找不到什么，那么现在有人如何做到这一点？
what I'm trying to make Is this menu that when you click on a Plus button it has this drop down menu, but if javascript is disabled I want it to show on hover with css ( i've already done that )
我想要做的是这个菜单，当你点击加号按钮时，它有这个下拉菜单，但如果禁用了 javascript，我希望它在使用 css 悬停时显示（我已经这样做了）
i've put My code on JsFiddle, heres the link: http://jsfiddle.net/MrPumpkin22/v9dcC/10/
我已将我的代码放在 JsFiddle 上，链接如下：http: //jsfiddle.net/MrPumpkin22/v9dcC/10/
thanks.
谢谢。
回答by Wayne
You need to iterate the returned elements and replace that portion of the class name on each one:
您需要迭代返回的元素并替换每个元素的类名部分：
var els = [].slice.apply(document.getElementsByClassName("no-js"));
for (var i = 0; i < els.length; i++) {
els[i].className = els[i].className.replace(/ *\bno-js\b/g, "js");
}
Note that getElementsByClassNamereturns a "live list", which is why it's necessary to first make a copy of the return value (using [].slice) and iterate that list instead).
请注意，getElementsByClassName返回一个“实时列表”，这就是为什么有必要首先制作返回值的副本（使用[].slice）并迭代该列表）。
回答by Dau
by javascript you can change the class name using
通过javascript，您可以使用更改类名
document.getElementById('elementid').className = 'classname'
document.getElementById('elementid').className = 'classname'
if you want to add a new class by javascript use
如果您想通过 javascript 添加一个新类，请使用
document.getElementById('elementid').className += ' classname'
document.getElementById('elementid').className += ' classname'
if you want to replace class name with other things use strings replace function
如果你想用其他东西替换类名，请使用字符串替换函数
document.getElementById('elementid').className = document.getElementById('elementid').className.replace(your replace code)
document.getElementById('elementid').className = document.getElementById('elementid').className.replace(your replace code)
回答by Bryan Willis
look like a question, but seems to be the preferred way of doing it...
看起来像一个问题，但似乎是这样做的首选方式......
(function(html){html.className =
html.className.replace(/\bno-js\b/,'js')})(document.documentElement);
Example:
例子：
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head itemscope itemtype="http://schema.org/WebSite">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
<title>Example Site| My Site Description</title>
Notice the location of this early on the document head... This ensures that it get's added immediately. This is much faster approach than a jquery alternative. I believe this is how modernizr does it.
注意文档头部早期的位置...这确保它被立即添加。这比 jquery 替代方法快得多。我相信这就是 Modernizr 的做法。
回答by katspaugh
Doesn't the name of the getElementsByClassNamemethod give you a hint that it should return not a single element but multiple elements? Because there can be many elements with the same class in the document. Read the docsmore carefully.
该getElementsByClassName方法的名称是否提示您它不应该返回单个元素，而是返回多个元素？因为文档中可以有许多具有相同类的元素。更仔细地阅读文档。
If you're familiar with CSS, there is document.querySelectorAllmethod, which retrieves elements via CSS selectors.
如果您熟悉 CSS，可以使用document.querySelectorAllmethod，它通过 CSS 选择器检索元素。
var plusLinks = document.querySelectorAll('a.no-js')
Then you can access individual links by their numeric index:
然后您可以通过数字索引访问各个链接：
var firstLink = plusLinks[0]
As for the classattribute (and it isclassattribute, not no-jsattribute), you shouldn't remove it, but set it to a new value.
至于class属性（它是class属性，不是no-js属性），你不应该删除它，而是将它设置为一个新值。
firstLink.setAttribute('class', 'js')
Or:
或者：
firstLink.className = 'js'
Since you want to remove the hover effect, and the body element already has no-jsclass on it, you can replace the class once for the whole page:
由于要移除悬停效果，并且 body 元素上已经有no-jsclass，因此可以为整个页面替换一次 class：
document.body.className = 'js'
回答by Acn
Step 1 - get element by it's unique ID-
第 1 步 - 通过它的唯一 ID 获取元素 -
Element = Document.GetElementByID("whatever");
Step 2- remove the attribute class-
步骤 2- 删除属性类-
Element.RemoveAttribute("class");
Step 3 - create attribute class -
第 3 步 - 创建属性类 -
var attribute = document.createAttribute("class");
attribute.nodeValue = "someclassnamehere"
Element.setAttributeNode(attribute);
回答by samir chauhan
In Javascript you can do this by following :
在 Javascript 中，您可以通过以下方式执行此操作：
document.getElementById('id').add('class');
document.getElementById('id').remove('class');
