今天的同学问了一个问题“JS的效果是点击对应的标签，背景色变红，字体变白”，但是只有她页面里的文字变色，背景色不变。
截图如下：
调试完页面，发现没有进入循环，就用()；发现弹出的cns[]数组长度为0。
问题：
1.描述在“nt4”(“ulli”)；无法得到对应的li，发现无法通过这种方式得到值，应写成：(" nt4 ")(" Li ")；()，证明值可以取；
2.但是取值后，并没有进入事件。为什么？用监听事件替换onclick事件：cns [I]。addeventlistener ('click ')，function () {}发现它可以被单击，因为在li的这个页面上还有其他地方写onclick事件，当同一个元素有多个click事件时会被替换。所以图中的click事件被别人覆盖了，可以用addeventlistene ('click '，function () {}监控事件代替；
3.js代码可以实现后，发现背景色还是不变红，因为在css样式里，原来。CRD _ orderi { }已经写了背景色，但是权重。lis{}不够，背景色自然无法覆盖原颜色。
调试后，的代码如下：
Html结构如下：
div class=crdid=nt4ul class=CRD _ order lic class=CRD-orderid=c _ rd _ order 1所有PC class=ck1id=ck1/p/Lili class=CRD-orderid=c _ rd _ order 2未预订同学PC class=ck1id=CK2/p/Lili class=CRD-order id=c _ rd _ order 3已预订同学PC class=ck1id=ck3/p/Lili class=CRD-order id=c _ rd _ order 4未支付押金同学Lili class=CRD-orderid=c _ rd _ order 5已支付押金的学生pclass=ck1id=ck5/p/Lili class=CRD-下载课程报告/li/ul/div
页面效果：
要达到的效果是点击相应的标签，背景颜色变成红色，字体变成白色
Js代码：
脚本
var cns=document . GetElementbyID(nt4)。getElementsByTagName(Li)；for(vari=0；icns.lengthi ){cns[i]。addEventListener('click '，function(){ for(vari=0；icns.lengthi ){cns[i]。CLaSS name=} this . CLaSS name=lis })；}/script//CSS style part : CRD _ order . lis { background : red；color: # fff{}
知识点：
1、getElementsByTagName(" Li ")；该值是一个li集合，每个li点击事件需要一个for循环来获取每个特定的li
为
(vari=0；icns.lengthi ){
cns[i]。addEventListener('click '，function(){}
2.一个元素不能有多个点击事件，稍后的点击事件会覆盖这些事件；
3.css权重：次要权重大于主要权重：的权重。CRD_order.lis{}大于。lis { }；
4.调试代码的时候，学会用弹出值的方法来判断写出来的代码是否正确，是否真的得到了想要的值，值是错的，后者不会实现；
相关阅读
版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除
标签： #纯手工js事件切换热门博客列表