js当前元素加样式兄弟元素去掉（js修改元素样式的方法）

发布时间：2023-12-08

js当前元素加样式兄弟元素去掉（js修改元素样式的方法）

**更新：**2022-11-09 08:26

本文目录一览：

  1. js中实现点击一个元素加边框,点击另一个元素去掉前一个元素边框,当前元素加边框？
  2. js如何给目标元素的兄弟元素更改样式
  3. js代码addClass和removeClass写在同一句代码里面
  4. 求大神解释一段js代码，代码如下：
  5. vue中点击div里的当前元素添加class删除其他兄弟元素的class？
  6. [JS 给一个li添加样式，同时去掉其他li的样式](#JS 给一个li添加样式，同时去掉其他li的样式)

js中实现点击一个元素加边框,点击另一个元素去掉前一个元素边框,当前元素加边框？

使用：.addClass('active').siblings().removeClass('active')；即可 解释：给当前选中的增加边框.addClass('active')
给原先选中的取消边框.siblings().removeClass('active')
详细如下：

.clr:after {
  clear: both;
  display: block;
  overflow: hidden;
  height: 0;
  content: ".";
}
.clr {
  zoom: 1;
}
.price {
  width: 100%;
}
.price a {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #eee;
  float: left;
  margin: 0 5px;
  display: block;
  cursor: pointer;
}
.price a.active {
  border: 1px solid red;
}

<div class="price clr">
  <a>5元</a>
  <a>10元</a>
  <a>100元</a>
  <a>200元</a>
</div>

<script type="text/javascript" src="引用jquery.js或zepto.js"></script>
<script type="text/javascript">
$(function(){
  $('.price a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
  });
});
</script>

效果如下：

js如何给目标元素的兄弟元素更改样式

找到目标元素的父元素，再找到它的子元素即可：

目标元素.parentNode.childNode

然后再通过循环给每个元素更改样式即可。当然这里面也包括了目标元素，要不要排除掉就看你了。 也可以直接找目标元素的兄弟元素，但这要分两步走：往前找和往后找，除非目标元素是所有兄弟里面的老大或老幺，倒不如通过老爸直接找到所有兄弟来得更快更方便。

js代码addClass和removeClass写在同一句代码里面

亲，这句话的意思是给当前的这个元素添加一个class，同时把他的兄弟元素的这个class全部去掉的意思。

求大神解释一段js代码，代码如下：

切换当前jquery对象的class属性为currentDd，并且把它的兄弟节点的class为subNav的节点移除掉样式。 currentDd

vue中点击div里的当前元素添加class删除其他兄弟元素的class？

toggleClass方法可以实现对某一class进行添加、删除操作。 示例：

$('#test').toggleClass('className');

上面的代码将会依次为id为test的元素添加/删除名为className的class，如果test元素存在className，则删除className，如果不存在则添加className。 .toggleClass( className )

  • className
    类型: String
    在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。

JS 给一个li添加样式，同时去掉其他li的样式

<script type="text/javascript" defer="defer">
function changeStyle(ele){
  var liAry=document.getElementById("box").getElementsByTagName("li");
  var liLen=liAry.length;
  var liID=ele.id;
  for(var i=0; i<liLen; i++) {
    if(liAry[i].id==liID) {
      liAry[i].style.backgroundColor="#cccccc";
    } else {
      liAry[i].style.backgroundColor="white";
    }
  }
}
</script>

<div id="box">
  <li id='1' style="background-color:#cccccc;" onclick="changeStyle(this)">AAA</li>
  <li id='2' onclick="changeStyle(this)">BBB</li>
  <li id='3' onclick="changeStyle(this)">CCC</li>
</div>
推荐文章