獲取尺寸
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <style>
? ? ? ? div {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: pink;
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? border: 15px solid red;
? ? ? ? ? ? margin: 20px;
? ? ? ? }
? ? </style>
? ? <script src="jquery.min.js"></script>
</head>
<body>
? ? <div></div>
? ? <script>
? ? ? ? $(function() {
? ? ? ? ? ? // 1. width() / height() 獲取設(shè)置元素 width和height大小
? ? ? ? ? ? console.log($("div").width());
? ? ? ? ? ? // $("div").width(300);
? ? ? ? ? ? // 2. innerWidth() / innerHeight() ?獲取設(shè)置元素 width和height + padding 大小
? ? ? ? ? ? console.log($("div").innerWidth());
? ? ? ? ? ? // 3. outerWidth() ?/ outerHeight() ?獲取設(shè)置元素 width和height + padding + border 大小
? ? ? ? ? ? console.log($("div").outerWidth());
? ? ? ? ? ? // 4. outerWidth(true) / outerHeight(true) 獲取設(shè)置 width和height + padding + border + margin
? ? ? ? ? ? console.log($("div").outerWidth(true));
? ? ? ? })
? ? </script>
</body>
</html>
2.獲取位置
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? .father {
? ? ? ? ? ? width: 400px;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? background-color: pink;
? ? ? ? ? ? margin: 100px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? .son {
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 150px;
? ? ? ? ? ? background-color: purple;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 10px;
? ? ? ? ? ? top: 10px;
? ? ? ? }
? ? </style>
? ? <script src="jquery.min.js"></script>
</head>
<body>
? ? <div class="father">
? ? ? ? <div class="son"></div>
? ? </div>
? ? <script>
? ? ? ? $(function() {
? ? ? ? ? ? // 1. 獲取設(shè)置距離文檔的位置（偏移） offset
? ? ? ? ? ? console.log($(".son").offset());
? ? ? ? ? ? console.log($(".son").offset().top);
? ? ? ? ? ? // $(".son").offset({
? ? ? ? ? ? // ? ? top: 200,
? ? ? ? ? ? // ? ? left: 200
? ? ? ? ? ? // });
? ? ? ? ? ? // 2. 獲取距離帶有定位父級位置（偏移） position ? 如果沒有帶有定位的父級陷嘴，則以文檔為準
? ? ? ? ? ? // 這個方法只能獲取不能設(shè)置偏移
? ? ? ? ? ? console.log($(".son").position());
? ? ? ? ? ? // $(".son").position({
? ? ? ? ? ? // ? ? top: 200,
? ? ? ? ? ? // ? ? left: 200
? ? ? ? ? ? // });
? ? ? ? })
? ? </script>
</body>
</html>
