此次案例展示了使用jQuery中attr()/css()以及快捷方法等方法实现对DOM元素属性的设置、获取。代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery attr和css等方法的使用</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
//传入两个参数改变其属性
$("#pic").attr("src","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523089969796&di=933c5a10ec37559509f67fa9a74db48d&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201509%2F22%2F20150922214736_YNUcE.jpeg")
$("#pic").attr("alt","霓凰郡主")
//传入一个参数用来获取其属性
alert($("#pic").attr("alt"))
});
$("#btn2").click(function(){
$("#pic").attr("width",400)
});
$("#btn3").click(function(){
$("#pic").removeAttr("width")
});
$("#btn4").click(function(){
// 添加样式
$("img").css({
'width': '400',
'border-radius': '30%',
'box-shadow': '5px 5px 5px #888'
})
// 读取样式
alert("图片的宽度是："+$("img").css('width'))
});
$("#btn5").click(function(){
$("#pic").width("600px");
$("#pic").height("400px");
alert("图片的宽度是："+$("#pic").width()+"px图片的高度是："+$("#pic").height()+"px")
});
$("#btn6").click(function(){
alert("图片左边的距离是："+$("img").offset().left)
alert("图片上边的距离是："+$("img").offset().top)
});
$("#btn7").click(function(){
alert("图片左边的偏移量是："+$("img").position().left)
alert("图片上边的距离是："+$("img").position().top)
});
});
</script>
</head>
<body>
<span><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1523089874847&di=20b3dd20ddab86933bcef9d8826609d0&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Flarge%2Fa2866d85jw1ex1fbn965fj20u00i0q62.jpg" alt="胡歌" id="pic"></span>
<button id="btn1">换图片</button>
<button id="btn2">给图片添加width属性</button>
<button id="btn3">删除图片width属性</button>
<button id="btn4">css方法设置图片样式</button>
<button id="btn5">width/height方法设置</button>
<button id="btn6">offset获取元素的位置</button>
<button id="btn7">position获取元素的偏移量</button>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
