如何在所有元素上用“js”替换“no js”类名



我要做的是获取类名为no-js的元素,并将其替换为js

我不知道该怎么做。我试着在谷歌上搜索,但什么都找不到,所以有人知道怎么做吗?

我的目标是让菜单在点击时显示下拉导航,但如果JavaScript被禁用,我希望它在CSS悬停时显示(我已经做到了)。

我已经把我的代码放在了JSFiddle上。

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

var els = [].slice.apply(document.getElementsByClassName("no-js"));
for (var i = 0; i < els.length; i++) {
    els[i].className = els[i].className.replace(/ *bno-jsb/g, "js");
}

请注意,getElementsByClassName返回一个"活动列表",这就是为什么需要首先复制返回值(使用[].slice)并迭代该列表)。

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

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

如果您想通过javascript添加一个新类,请使用

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

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

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

看起来像是一个问题,但似乎是首选的方法…

(function(html){html.className = 
   html.className.replace(/bno-jsb/,'js')})(document.documentElement);

示例:

<!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-jsb/,'js')})(document.documentElement);</script>
    <title>Example Site| My Site Description</title>

注意这个在文档头上的位置。。。这样可以确保立即添加它。这是一种比jquery替代方法快得多的方法。我相信modernizr就是这样做的。

getElementsByClassName方法的名称不是提示您它应该返回多个元素而不是单个元素吗?因为文档中可能存在许多具有相同类的元素。仔细阅读文档。

如果您熟悉CSS,有一个document.querySelectorAll方法,它通过CSS选择器检索元素。

var plusLinks = document.querySelectorAll('a.no-js')

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

var firstLink = plusLinks[0]

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

firstLink.setAttribute('class', 'js')

或者:

firstLink.className = 'js'

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

document.body.className = 'js'

步骤1-通过元素的唯一ID获取元素-

Element = Document.GetElementByID("whatever");

步骤2-删除属性类-

Element.RemoveAttribute("class");

步骤3-创建属性类-

    var attribute = document.createAttribute("class");
    attribute.nodeValue = "someclassnamehere"
    Element.setAttributeNode(attribute);

最新更新