1、页面中有多张图片，点击图片，自身 添加一个像素灰色的实线边框，内边距10像素，圆角矩形(可以采用多种方式实现 1> .css().css() 2> .css({“border”:“1px solid gray”,“padding”:“10px”}); 3> addClass 的方式);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>为图片添加边框</title>
<style>
<style>
*{
margin: 0;
padding: 0;
}
#adList{
position: relative;
width: 300px;
border: 1px solid green;
}
#adList img{
width: 300px;height:300px ;
vertical-align: middle;
}
/*#adList li a:hover{
background: red;
color: #fff;
}*/
#adList li .a_nomal{
background: #fff;
color: #000;
}
#adList li .a_hover{
background: grayed;
color: #fff;
}
</style>
</head>
<body>
<script type="text/javascript" src="../jquery-3.5.1.js"></script>
<script type="text/javascript">
//方法1 使用css()方法
$(function(){
$("img").eq(0).click(function(){
$(this).css("border":"1px solid gray","padding":"10px");
})
})
//方法2 使用addClass（）方法
// $(function(){
// $("img").click(function(){
// $(this).addClass('border');
// })
// })
</script>
<style type="text/css">
.border{
border:10px solid #ccc;}
</style>
</head>
<body>
<div id="adList">
<img s
最低0.47元/天 解锁文章
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
