<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
background-color: indianred;
position: absolute;
left: 100px;
top: 200px;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//點(diǎn)擊按鈕,設(shè)置div的left和top的值是原來(lái)的2倍
$(function () {
$("#btn").click(function () {
//獲取left和top ---獲取的仍然是字符串類型
// var l=$("#dv").css("left");
// var t=$("#dv").css("top");
// //console.log(l);
// var left1=parseInt(l)*2;
// var top1=parseInt(t)*2;
// $("#dv").css("left",left1+"px");
// $("#dv").css("left",top1+"px");
//該方法獲取的是一個(gè)對(duì)象,該對(duì)象中有兩個(gè)屬性,left和top
//left和top包含left和margin-left和top和margin-top的值
//console.log($("#dv").offset().left);
$("#dv").css("left", $("#dv").offset().left * 2);
$("#dv").css("top", $("#dv").offset().top * 2);
$("#dv").offset({"left": 500, "top": 250});
});
});
/*
* 可以設(shè)置,也可以獲取
* .width()是元素的寬
* .height()是元素的高
*
* .offset()--->獲取的是對(duì)象,可以設(shè)置,也可以獲取
* .offset({"left":值,"top":值});設(shè)置
*
*
* */
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>
|
