想用javascript实现点击一个元素，其背景变红，点击下一个，背景变红，其它元素恢复原来背景

<ul>

<li>1111</li>

<li>1111</li>

<li>1111</li>

<li>1111</li>

<li>1111</li>

<li>1111</li>

</ul>

<script>

const aLi=documentquerySelectorAll('li');

for(let i=0;i<aLilength;i++){

aLi[i]onclick=function(){

for(let j=0;j<aLilength;j++){

aLi[j]stylebackgroundColor=(j==i)'red':'';

}

}

}

</script>

如下代码可以实现点击页面获得被点击元素的id

$(document)click(function(e) { // 在页面任意位置点击而触发此事件

  $(etarget)attr("id");       // etarget表示被点击的目标

})

示例代码如下

创建Html元素

<div class="box">

<span>点击页面后，设置被点击元素背景色并获取其id：</span><br>

<div class="content" id = "test">test

<div id = "test1">test1

<div id = "test2">test2

<div id = "test3">test3</div>

</div>

</div>

</div>

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

divcontent div{min-width:20px;min-height:20px;padding:30px;border:1px solid #446699;background:#ffffff;}

bg{background:#ff99cc !important;}

编写jquery代码

$(function(){

$(document)click(function (e) {

$(etarget)addClass('bg');     // 设置背景色

alert($(etarget)attr('id'));  // 获取id

})

})

观察效果

初始状态

点击id为test2的div

1：div22stylebackground = "red";这样可以实现div22这个元素的背景颜色为红色。而div22添加的样式是内联样式。

2：所以内联样式？你需要知道一下什么是内联样式。也就是这个元素本身的style属性中的css样式，这里的style属性中国的css样式权重值最高。

3：在内联样式中，如果想要写一个背景那么就需要这样写才能生效：

<div style="background-image：url('img/1jpg');"></div>

4：所以在js中动态添加或这更改背景就需要这样：

div22stylebackgroundImage = "url('img/1jpg')";

5：对以上会打有哪里不理解的请指正或者追问

在某个需求下，需要鼠标移入时是A背景图，移出时是B背景图。（针对于Vue项目），如果是普通的HTML页面可直接在js中获取dom元素去修改style等方式实现，在Vue中，需要先将导入，将声明为一个变量。

如截图所示，我们要改变的是红圈标记的两个，当鼠标移入部分时，将那块的image替换为UI给的。

这里也可以用require去获取

也可以使用import导入再去data中去赋值给变量

下面就是赋值给到变量中去

以上就是关于想用javascript实现点击一个元素，其背景变红，点击下一个，背景变红，其它元素恢复原来背景全部的内容，包括:想用javascript实现点击一个元素，其背景变红，点击下一个，背景变红，其它元素恢复原来背景、jQuery如何实现点击页面获得当前点击元素的id或其他信息、js点击事件更换背景图片等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！