如何用javascript替换类的HTML名称

好吧，所以我想要做的是获取类名为'no-js'的元素并将其替换为'js'，所以我不知道该怎么办这，我试过谷歌周围，但找不到任何东西，所以现在没有人如何做到这一点？如何用javascript替换类的HTML名称

我想做的是这个菜单，当你点击一个加号按钮时，它有这个下拉菜单，但如果JavaScript被禁用，我希望它显示与CSS悬停（我已经做到了）

，我已经把我的上的jsfiddle代码，继承人的链接： http://jsfiddle.net/MrPumpkin22/v9dcC/10/

感谢。

来源

2012-01-03 user1064634

已更新我的答案，以显示您的问题的两个部分的完整代码。 1）改变类2）使+按钮切换subnav :) – vdbuilder 2012-01-03 08:13:42

-3

在Javascript中，你可以通过以下做到这一点：

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

来源

2012-01-03 06:52:15

-1 - jquery没有提到。 – 2012-01-03 06:58:43

而示例代码是错误的。不过，有''classList'接口]（https://developer.mozilla.org/en/DOM/element.classList）和'add'和'remove'方法。 – katspaugh 2012-01-03 18:01:56

不会在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'

来源

2012-01-03 06:54:25 katspaugh

您需要遍历返回的元素并将每个类的名称部分替换为：

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）并重复该列表）。

来源

2012-01-03 07:01:05

谢谢！我一度在寻找getElementById-less解决方案。我的目标是创建这个Drupal黑客：https://groups.drupal.org/node/10919#comment-1152470 – eapo 2016-12-10 00:31:26

由JavaScript，如果你想通过JavaScript中使用

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

，如果你要替换类名来添加一个新的类，你可以更改使用

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

类名其他东西用字符串替换功能

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

来源

2012-01-03 07:01:29 Dau

-1

第1步 - 获得通过元素它的独特ID-

Element = Document.GetElementByID("whatever");

步骤2-删除属性接收机类

Element.RemoveAttribute("class");

步骤3 - 创建属性类 -

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

来源

2012-01-03 07:02:54 Acn

-1 - 这是什么？ – 2012-01-03 07:24:10

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

(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替代方法快得多。我相信这是现代化的做法。

来源

2015-12-24 06:57:08

如何用javascript替换类的HTML名称

回答

相关问题