我要做的是获取类名为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);