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)并迭代该列表的原因.
通过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-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 就是这样做的。
该方法的名称是否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)
| 归档时间: |
|
| 查看次数: |
43065 次 |
| 最近记录: |