用js控制父元素中的子元素,不要用css,大神请进
举个例子<divclass="dad"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></l...
举个例子
<div class="dad">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
一共有10个li
他们的背景颜色都是#000黑色
但我想改变从第四个li开始到第十个li的背景颜色,变成red;
用js来做,不要用css,我就想知道如何操作 展开
<div class="dad">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
一共有10个li
他们的背景颜色都是#000黑色
但我想改变从第四个li开始到第十个li的背景颜色,变成red;
用js来做,不要用css,我就想知道如何操作 展开
展开全部
var oLis = document.getElementsByClassName("dad")[0].getElementsByTagName("li");
for(var i = 3;i<oLis.length;i++){
oLis[i].style.backgroundColor = "red";
}
这个是原生js写的,因为用的getElementsByClassName有兼容性问题,我就不写解决的函数了
$(function(){
$(".dad").find("li").slice(3).css("backgroundColor","red")
})
这个是用JQ写的
这两个你要哪个拿哪个,不懂追问,反正这是小问题,满意劳烦采纳,实在需要原声兼容我补充给你
推荐于2016-01-17
展开全部
<html>
<script src="jquery-1.9.1.js"></script>
<style type="text/css">
li{width:20px;height:20px;background:black;margin-top:20px;}
</style>
<body>
<div class="dad">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
$(function() {
var obj = $(".dad").find("li");
$.each(obj,function(k,v) {
if(k >= 3) {
$(this).css("background","red");
}
})
});
</script>
</body>
</html>
<script src="jquery-1.9.1.js"></script>
<style type="text/css">
li{width:20px;height:20px;background:black;margin-top:20px;}
</style>
<body>
<div class="dad">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
$(function() {
var obj = $(".dad").find("li");
$.each(obj,function(k,v) {
if(k >= 3) {
$(this).css("background","red");
}
})
});
</script>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询