<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>attr()和css()的用法,</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div><img src="http://pic2116.ytqmx.com:82/2017/0907/6/1.jpg"></div>
<button>获得宽度</button>
<button>改变高度</button>
<button>设置偏移</button>
<button>改变图片样式</button>
<p>图片的宽度是 <span id="span1"></span> px。</p>
<script type="text/javascript">
//设置图片的CSS样式
$("img").css({"box-shadow":"10px 10px 5px #888888","border-radius":"50%"})
//设置图片的宽度
$("img").attr("height","400")
//获取图片的宽度
$(".btn1").click(function(){
$("#span1").text($('img').width());
});
//改变图片的高度
$(".btn2").click(function(){
$("img").height(600);
});
//改变图片的偏移
$(".btn3").click(function(){
$("img").offset({left:500});
});
</script>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
