【jQuery】點擊事件+抓取元素尺寸

width、height、innerWidth、innerHeight、outerWeight、outerHeight

 發表於 2024-01-23  |  2 分鐘  |  270 個字

【jQuery】點擊事件+抓取元素尺寸

width、height、innerWidth、innerHeight、outerWeight、outerHeight

 發表於 2024-01-23  |  2 分鐘  |  270 個字

抓取元素高度(content-box)

語法 說明
.height() height
.innerHeight() height + padding
.outerHeight() height + padding+border
.outerHeight(true) height + padding + border + margin

先決條件是：box-sizing: content-box

1
2

<button type="button">按鈕</button>
<div class="box"></div>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.box{
  width: 50px;
  height: 50px;
  border: solid 5px black;
  padding: 10px;
  margin: 25px;
  background-color: red;

  box-sizing: content-box; /* 引響關鍵 */
}


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//抓取元素高度
$("button").click(function(){
  let boxHeight = $(".box").height()
  console.log(boxHeight); //50
});

//抓取內部高度
$("button").click(function(){
  let boxHeight = $(".box").innerHeight()
  console.log(boxHeight); //50 + (上下padding:20px)  = 70
});


//抓取整體高度
$("button").click(function(){
  let boxHeight = $(".box").outerHeight()
  console.log(boxHeight); //50 + (上下padding:20px) + (上下border:10px) = 80
});

//抓取外部高度
$("button").click(function(){
  let boxHeight = $(".box").outerHeight(true)
  console.log(boxHeight); //50 + (上下padding:20px) + (上下border:10px) + (上下margin:50px) = 130
});

抓取元素高度(border-box)

語法 說明
.height() height - border - padding
.innerHeight() height - border
.outerHeight() height
.outerHeight(true) height + margin

先決條件是：box-sizing: border-box

1
2

<button type="button">按鈕</button>
<div class="box"></div>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.box{
  width: 50px;
  height: 50px;
  border: solid 5px black;
  padding: 10px;
  margin: 25px;
  background-color: red;

  box-sizing: border-box; /* 引響關鍵 */
}


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//抓取元素高度
$("button").click(function(){
  let boxHeight = $(".box").height()
  console.log(boxHeight); //50 - (上下border:10px) - (上下padding:20px) = 20
});

//抓取內部高度
$("button").click(function(){
  let boxHeight = $(".box").innerHeight()
  console.log(boxHeight); //50 - (上下border:10px)  = 40
});


//抓取整體高度
$("button").click(function(){
  let boxHeight = $(".box").outerHeight()
  console.log(boxHeight); //50
});

//抓取外部高度
$("button").click(function(){
  let boxHeight = $(".box").outerHeight(true)
  console.log(boxHeight); //50 + (上下margin) = 100
});

jquery 

其他相關