如何在所有元素上用`js`替换`no-js`类名？ [复制]答案

【问题标题】：How to replace the `no-js` class name by `js` on all elements? [duplicate]如何在所有元素上用`js`替换`no-js`类名？ [复制]
【发布时间】：2012-02-01 06:57:00
【问题描述】：

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

我不知道该怎么做。我尝试谷歌搜索，但找不到任何东西，所以有人知道该怎么做吗？

我的目标是让菜单在单击时显示下拉导航，但如果 JavaScript 被禁用，我希望它在悬停时显示 CSS（我已经这样做了）。

我已将我的代码放在JSFiddle。

【问题讨论】：

更新了我的答案，以显示您问题的两个部分的完整代码。 1) 更改类 2) 制作 + 按钮切换子导航 :)
这里的所有答案要么不正确，要么已过时。正确的现代答案是document.querySelectorAll(".no-js").forEach(({ classList }) => classList.replace("no-js", "js"));。见How to change all classname elements of specific classname。

标签： javascript html css

【解决方案1】：

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

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");
}

请注意，getElementsByClassName 返回一个“活动列表”，这就是为什么必须首先复制返回值（使用 [].slice）并迭代该列表）。

【讨论】：

谢谢！我一直在寻找 getElementById-less 解决方案。我的目标是创建这个 Drupal hack：groups.drupal.org/node/10919#comment-1152470

【解决方案2】：

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

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

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

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

如果你想用其他东西替换类名，请使用字符串替换功能

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

【讨论】：

【解决方案3】：

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

(function(html){html.className = 
   html.className.replace(/\bno-js\b/,'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-js\b/,'js')})(document.documentElement);</script>
    <title>Example Site| My Site Description</title>

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

【讨论】：

【解决方案4】：

getElementsByClassName 方法的名称不是提示您它应该返回的不是单个元素而是多个元素？因为文档中可以有许多具有相同类的元素。 Read the docs更仔细。

如果你熟悉 CSS，有 document.querySelectorAll method，它通过 CSS 选择器检索元素。

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

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

var firstLink = plusLinks[0]

至于class 属性（它是 class 属性，而不是no-js 属性），你不应该删除它，而是set it to a new value。

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

或者：

firstLink.className = 'js'

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

document.body.className = 'js'

【讨论】：

【解决方案5】：

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

Element = Document.GetElementByID("whatever");

第2步-删除属性类-

Element.RemoveAttribute("class");

第三步——创建属性类——

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

【讨论】：

【解决方案6】：

在 Javascript 中，您可以通过以下方式执行此操作：

document.getElementById('id').add('class');
document.getElementById('id').remove('class');

【讨论】：

-1 - 没有提到 jquery。
而且示例代码是错误的。不过，classList interface 有 add 和 remove 方法。
第一条评论是说document.getElementById("id") 与$("#id") 不同，其中可以使用add 或remove 等jQuery 方法，而不是这个答案应该提到 jQuery。此外，这也没有回答如何“获取类名为no-js 的元素并将其替换为js”的问题。 id 与此无关。