jQuery 菜鳥教程
jQuery 效果
- jQuery 隱藏/顯示
- jQuery 淡入淡出
- jQuery 滑動
- jQuery 動畫
- jQuery 停止動畫
- jQuery 回調(diào)函數(shù)(Callback)
- jQuery 鏈(Chaining)
jQuery 操作方法
jQuery 遍歷
jQuery Ajax
jQuery 雜項
jQuery 參考手冊
jQuery height() 方法
height()方法獲取或設(shè)置所選元素的高度。
當height()方法用于獲取高度時，它將返回第一個選定元素的高度。
當height()方法用于設(shè)置高度時，它將設(shè)置所有選定元素的高度。
如下圖所示，height()方法不包含padding，border或margin：
高度值也可以是相對的。如果為值提供了前導+=或-=字符序列，則通過從當前值中加上或減去給定的數(shù)值來計算目標高度（例如 height（"+ = 50"））。
語法：
獲得高度：
$(selector).height()
設(shè)置高度：
$(selector).height(value)
使用函數(shù)設(shè)置高度：
$(selector).height(function(index, currentHeight))
實例
獲取DIV元素的高度：
$("div").click(function(){
$(this).height();
});測試看看?/?設(shè)置所有段落的高度：
$("button").click(function(){
$("p").height(50);
});測試看看?/?使用不同的單位設(shè)置所有段落的高度：
$("#btn1").click(function(){
$("p").height(50);
});
$("#btn2").click(function(){
$("p").height("7em");
});
$("#btn3").click(function(){
$("p").height("100vh");
});測試看看?/?單擊按鈕時，增加所有段落的高度（使用功能）：
$("button").click(function(){
$("p").height(function(i, val){
return val * 2;
});
});測試看看?/?height()方法還能夠找到窗口和文檔的高度：
$(window).height();// 返回瀏覽器窗口的高度 $(document).height(); // 返回HTML文檔的高度測試看看?/?
顯示width()，height()，innerHeight()，innerWidth()，outerWidth()和outerHeight()之間的差異：
$("button").click(function(){
$("div").width();
$("div").innerWidth();
$("div").outerWidth();
$("div").height();
$("div").innerHeight();
$("div").outerHeight();
});測試看看?/?用戶滾動頁面時添加平滑滾動效果：
let size = $(".main").height(); // 獲取".main" 高度
$(window).keydown(function(event) {
if(event.which === 40) { // 如果按向下箭頭鍵
$("html, body").animate({scrollTop: "+=" + size}, 300);
} else if(event.which === 38) { // 如果按向上箭頭鍵
$("html, body").animate({scrollTop: "-=" + size}, 300);
}
});測試看看?/?參數(shù)值
| 參數(shù) | 描述 |
|---|---|
| value | 表示像素數(shù)的整數(shù)，或附加了可選度量單位的整數(shù)（作為字符串） |
| function(index, currentHeight) | 指定一個函數(shù)，該函數(shù)返回所選元素的高度
|