当前位置：首页 → 问答吧 → 如何改变每个li下的div的class？

如何改变每个li下的div的class？

时间：2010-05-06

来源：互联网

复制内容到剪贴板

代码:

如何分别改变li下的div的class=yes'?
onClick="document.getElementsByClassName('no').className='yes'"
这个好像实现不了

作者: benaheng 发布时间: 2010-05-06

getElementsByClassName 获得的是一个数组，要更改需要用个for 循环吧

比如：
var x = document.getElementsByClassName('no');
for (i=0;i<x.length;i++)
{
document.getElementsByClassName('no')[i].className='yes';
}

突然迷糊了。。js 里面有 getElementsByClassName 这个方法吗？？？？只记得有 getElementsByTagName。。。

[ 本帖最后由 isayno 于 2010-5-6 14:30 编辑 ]

作者: isayno 发布时间: 2010-05-06

引用:

原帖由 isayno 于 2010-5-6 14:27 发表
getElementsByClassName 获得的是一个数组，要更改需要用个for 循环吧

比如：
var x = document.getElementsByClassName('no');
for (i=0;i

那单击li后改变该li下的div该怎么写？

作者: benaheng 发布时间: 2010-05-06

仔细查了一下，js 貌似没有 getElementsByClassName 这个方法，需要自己写。

大概思路就是先用 getElementsByTagName获得所有 li 标签，

然后循环数组找到所有 className=“no”，

最后改成 "yes"

大概写个给你看看

function getElementByClassName(tag,oldName,newName)
{
var o = document.getElementByTagName(tag);
for (var i=0;i<o.length;i++)
{
if(o[i].className==oldName)
o[i].className=newName;
}
}

调用的时候在onclick 里面就写 getElementByClassName("li","no","yes")
没调试过，你自己试试

[ 本帖最后由 isayno 于 2010-5-6 14:38 编辑 ]

作者: isayno 发布时间: 2010-05-06

如果是指定修改那就 this.childNodes[0].className="yes" 数清楚是要修改的节点直接改了

作者: isayno 发布时间: 2010-05-06

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content="Editplus4PHP" /> <meta name="keywords" content="Leo, HentStudio, Editplus4PHP, LeoPHP" /> <meta name="description" content="LeoPHP - Powered by HentStduio" /> <meta name="author" content="Leo" />  <link rel="shortcut icon" href="images/favicon.ico" /> <title>Example | xHTML1.0</title> <style type="text/css"> ul li div{width:60px;height:20px;} .yes{background:#f5f5f5;} .no{background:#0f0;} </style> </head> <body> <ul id="test"> <li> <div class="no"></div> <a href="###"> demo1</a> </li> <li> <div class="yes"></div> <a href="###"> demo2</a> </li> <li> <div class="yes"></div> <a href="###"> demo3</a> </li> </ul> </body> </html> <script type="text/javascript">  </script>
提示：您可以先修改部分代码再运行

test(0);
test(1);
test(2);
也可以写在对应的标签上比如