如何使用js来控制图片的css样式？
<divclass=Student_list><liclass=img1><imgsrc="image/1.jpg"/></li><liclass=img2><imgsr...
<div class=Student_list>
<li class=img1><img src="image/1.jpg" /></li>
<li class=img2><img src="image/2.jpg" /></li>
<li class=img2><img src="image/3.jpg" /></li>
<li class=img2><img src="image/4.jpg" /></li>
<li class=img2><img src="image/5.jpg" /></li>
<li class=img2><img src="image/6.jpg" /></li>
<li class=img2><img src="image/7.jpg" /></li>
<li class=img1><img src="image/8.jpg" /></li>
</div>
我想实现使用js来控制图片使用的css样式，图片列表是动态数据，随时都会变化，我想让js来控制第一张图片和最后一张图片使用img1样式，让其他图片使用img2样式，这样的js要怎么写，请js大神帮忙一下，谢谢 展开
<li class=img1><img src="image/1.jpg" /></li>
<li class=img2><img src="image/2.jpg" /></li>
<li class=img2><img src="image/3.jpg" /></li>
<li class=img2><img src="image/4.jpg" /></li>
<li class=img2><img src="image/5.jpg" /></li>
<li class=img2><img src="image/6.jpg" /></li>
<li class=img2><img src="image/7.jpg" /></li>
<li class=img1><img src="image/8.jpg" /></li>
</div>
我想实现使用js来控制图片使用的css样式，图片列表是动态数据，随时都会变化，我想让js来控制第一张图片和最后一张图片使用img1样式，让其他图片使用img2样式，这样的js要怎么写，请js大神帮忙一下，谢谢 展开
6个回答
展开全部
这个可以用CSS实现就好了。不必要使用JS
图片放大效果的话，建议用一个额外的 div层放置放大后的图片，这样布局就不会乱了。鼠标放上去就显示这个层。
.img2{
/*这里写你的所有图片都会用到的样式*/
}
.img2:first-child, .img2:last-child{
/*这里写第一个图片和最后一个图片会用到的样式*/
}
.img1:hover .showBigImg{
display:block;
}
对于这个大图的div层的显示，可以稍加js控制，这样就可以所有图片共用一个div层来放置大图。
希望能帮助到你
图片放大效果的话，建议用一个额外的 div层放置放大后的图片，这样布局就不会乱了。鼠标放上去就显示这个层。
.img2{
/*这里写你的所有图片都会用到的样式*/
}
.img2:first-child, .img2:last-child{
/*这里写第一个图片和最后一个图片会用到的样式*/
}
.img1:hover .showBigImg{
display:block;
}
对于这个大图的div层的显示，可以稍加js控制，这样就可以所有图片共用一个div层来放置大图。
希望能帮助到你
追问
谢谢，以前没用过这个效果代码，很好用，又长知识了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2019-10-25 · 百度认证:云南新华电脑职业培训学校官方账号
云南新华电脑学校
云南新华电脑学校是经云南省教育厅批准成立的省（部）级重点计算机专业学校，采用三元化管理模式，教学设备先进，师资雄厚学生毕业即就业，学院引进了电商企业入驻，创建心为电商创业园区，实现在校即创业
向TA提问
关注
![]()
展开全部
//先获取dom节点
var a = document.getelementbyid('id')
a.style.color="red"; //改变颜色
a.innerhtml='修改内容'; //修改内容
//还可以动态的添加css来改变css样式
a.classname='class名';
var a = document.getelementbyid('id')
a.style.color="red"; //改变颜色
a.innerhtml='修改内容'; //修改内容
//还可以动态的添加css来改变css样式
a.classname='class名';
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
var lis = document.querySelectorAll("div.Student_list li");
lis[0].className=lis[lis.length-1].className="img1";
for(var i=1;i<lis.length-1;i++)lis[i].className="img2";
lis[0].className=lis[lis.length-1].className="img1";
for(var i=1;i<lis.length-1;i++)lis[i].className="img2";
更多追问追答
追问
这个代码倒是实现了我要的效果，但是有点问题，我现在图片上有一个鼠标经过放大图片的效果，现在鼠标经过图片，会出现一大堆白色的块来回弹，很乱
追答
这个嘛，没有看过你的完整代码是无法回答你的，程序是严谨的东西，不能靠瞎猜。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如何使用js来控制图片的css样式？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js控制css样式</title>
<script>
window.onload=function(){
//这是入口函数，等css运行完后再运行js
var fbox = document.getElementById("box1");
//这是把css里把id叫做box1的函数提到js里面，进而修改它的样式
fbox.style.width='100px';
fbox.style.height='100px';
fbox.style.backgroundColor='red'
}
</script>
</head>
<body>
<div id="box1">
这是js控制的css样式
</div>
<div">
这是没有js控制的css样式
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js控制css样式</title>
<script>
window.onload=function(){
//这是入口函数，等css运行完后再运行js
var fbox = document.getElementById("box1");
//这是把css里把id叫做box1的函数提到js里面，进而修改它的样式
fbox.style.width='100px';
fbox.style.height='100px';
fbox.style.backgroundColor='red'
}
</script>
</head>
<body>
<div id="box1">
这是js控制的css样式
</div>
<div">
这是没有js控制的css样式
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
