如何用javascript替换类HTML名称

use*_*634 5 javascript replace classname

好吧所以我要做的是用类名'no-js'获取元素并用'js'替换它,所以我不知道怎么做,我试过google周围但是找不到什么,现在有人如何做到这一点?

我想要做的是这个菜单,当你点击一个加号按钮它有这个下拉菜单,但如果javascript被禁用我希望它显示悬停与CSS(我已经完成了)

我把我的代码放在JsFiddle上,继续链接:http: //jsfiddle.net/MrPumpkin22/v9dcC/10/

谢谢.

Way*_*ett 10

您需要迭代返回的元素并在每个元素上替换类名的那一部分:

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");
}
Run Code Online (Sandbox Code Playgroud)

请注意,getElementsByClassName返回"实时列表",这就是为什么必须首先复制返回值(使用[].slice)并迭代该列表的原因.


Dau*_*Dau 6

通过javascript,您可以使用更改类名

document.getElementById('elementid').className = 'classname'

如果你想通过javascript使用添加一个新类

document.getElementById('elementid').className += ' classname'

如果要用其他东西替换类名,请使用字符串替换函数

document.getElementById('elementid').className = document.getElementById('elementid').className.replace(your replace code)


Bry*_*lis 5

看起来像一个问题,但似乎是这样做的首选方式......

(function(html){html.className = 
   html.className.replace(/\bno-js\b/,'js')})(document.documentElement);
Run Code Online (Sandbox Code Playgroud)

例子:

<!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>
Run Code Online (Sandbox Code Playgroud)

请注意它在文档头部早期的位置...这可以确保它立即被添加。这是比 jquery 替代方法快得多的方法。我相信 Modernizr 就是这样做的。


kat*_*ugh 2

该方法的名称是否getElementsByClassName暗示它不应该返回单个元素,而是返回多个元素?因为文档中可以有很多具有相同类的元素。阅读文档

如果您熟悉 CSS,可以使用document.querySelectorAllmethod来通过 CSS 选择器检索元素。

var plusLinks = document.querySelectorAll('a.no-js')
Run Code Online (Sandbox Code Playgroud)

然后您可以通过数字索引访问各个链接:

var firstLink = plusLinks[0]
Run Code Online (Sandbox Code Playgroud)

至于class属性(它 class属性,不是no-js属性),你不应该删除它,而应该将它设置为一个新值

firstLink.setAttribute('class', 'js')
Run Code Online (Sandbox Code Playgroud)

或者:

firstLink.className = 'js'
Run Code Online (Sandbox Code Playgroud)

由于您想要删除悬停效果,并且 body 元素已经具有no-js类,因此您可以为整个页面替换一次类:

document.body.className = 'js'
Run Code Online (Sandbox Code Playgroud)