js当前元素加样式兄弟元素去掉(js修改元素样式的方法)
**更新:**2022-11-09 08:26
本文目录一览:
- js中实现点击一个元素加边框,点击另一个元素去掉前一个元素边框,当前元素加边框?
- js如何给目标元素的兄弟元素更改样式
- js代码addClass和removeClass写在同一句代码里面
- 求大神解释一段js代码,代码如下:
- vue中点击div里的当前元素添加class删除其他兄弟元素的class?
- [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>