jQuery height() 方法用於返回第一個元素的當前計算高度或設置每個匹配元素的高度。換句話說,您可以說 height() 方法有兩個用途:
返回高度:當使用此方法返回高度時,它返回第一個匹配元素的高度。
設置高度:當使用此方法設置高度時,它會設置所有匹配元素的高度。
這個方法是一個很常見的jQuery維度。
before() 和 insertBefore() 兩種方法都用於執行相同的任務。它們之間的主要區別在於語法以及內容和目標的位置。
用法:
返回高度:
$(selector).height()
要設置高度:
$(selector).height(value)
使用函數設置高度:
$(selector).height(function(index,currentheight))
jQuery height() 方法的參數
參數 | 描述 |
---|---|
Value | 這是一個強製性參數。它以 px、em、pt 等為單位指定高度。它的默認單位是 px。 |
函數(索引,當前高度) | 這是一個可選參數。這用於指定返回所選元素的新高度的函數。
|
jQuery height() 方法示例
讓我們以一個例子來演示jQuery height() 方法。
返回高度:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Height of div:" + $("div").height());
});
});
</script>
</head>
<body>
<div style="height:100px;width:200px;padding:10px;margin:3px;border:1px solid blue;background-color:lightpink;"><div class="div">Hello Guys!<br/> This is javatpoint.com</div></div><br>
<button>Display the height of div</button>
</body>
</html>
jQuery height() 示例 2
設置高度:
此示例將展示如何設置特定高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>height demo</title>
<style>
div {
width:50px;
height:100px;
float:left;
margin:5px;
background:rgb(255,140,0);
cursor:pointer;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$( "div" ).one( "click", function() {
$( this ).height( 50 ).css({
cursor:"auto",
backgroundColor:"green"
});
});
</script>
</body>
</html>
相關用法
- JQuery hover()用法及代碼示例
- JQuery has()用法及代碼示例
- JQuery hide()用法及代碼示例
- JQuery html()用法及代碼示例
- JQuery hasData()用法及代碼示例
- JQuery hasClass()用法及代碼示例
- JQuery ajaxError()用法及代碼示例
- JQuery each()用法及代碼示例
- JQuery removeProp()用法及代碼示例
- JQuery event.isDefaultPrevented()用法及代碼示例
- JQuery trigger()用法及代碼示例
- JQuery data()用法及代碼示例
- JQuery first()用法及代碼示例
- JQuery scroll()用法及代碼示例
- JQuery prependTo()用法及代碼示例
- JQuery size()用法及代碼示例
- JQuery event.which用法及代碼示例
- JQuery Effect fadeOut()用法及代碼示例
- JQuery post()用法及代碼示例
- JQuery outerWidth()用法及代碼示例
注:本文由純淨天空篩選整理自 jQuery height()。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。