实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery元素属性提取及修改</title>
<style type="text/css">
.bg{
width: 300px;
height: 300px;
background-color: #999;
position: relative;
}
.yj{
border-radius: 50%;
}
.yy{box-shadow: 5px 5px 5px yellow}
.pos{
position: absolute;
top:20px;
left:20px;
}
</style>
</head>
<body>
<div id="box1">
<div class="box2">
<a href="">
<img src="images/boy.jpeg" alt="图片挂了再显示" >
</a>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 添加类样式
$('img').addClass('yj yy pos')
// 添加css内置样式
$('img').css({'width':'200','height':'200'})
$('#box1').addClass('bg')
$('.box2').addClass('center')
var res=$('img').attr('alt','替换了没？')
// 添加title标签
$('img').attr('title','名字出来')
// 查看高度，宽度
var res=$('img').width()
var res=$('img').height()
// 查看图片边距
var res=$('img').offset()
// 查看相对于父级块的位置
var res=$('img').position()
// 去掉class类样式
$('img').removeClass('pos ')
$('#box1').removeClass('bg')
// 取消alt属性
var res=$('img').removeAttr('alt')
$('img').attr('data-name','汪汪')
var res=$('img').attr('data-name')
console.log(res)
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
