jQuery 菜鳥教程
jQuery 效果
- jQuery 隱藏/顯示
- jQuery 淡入淡出
- jQuery 滑動(dòng)
- jQuery 動(dòng)畫
- jQuery 停止動(dòng)畫
- jQuery 回調(diào)函數(shù)(Callback)
- jQuery 鏈(Chaining)
jQuery 操作方法
jQuery 遍歷
jQuery Ajax
jQuery 雜項(xiàng)
jQuery 參考手冊(cè)
jQuery 尺寸
使用jQuery，可以輕松處理元素和瀏覽器窗口的尺寸。
jQuery提供了有效地操作元素尺寸的方法。
在本章中，我們將解釋如何獲取或設(shè)置HTML元素的尺寸。
jQuery尺寸方法
我們具有以下用于處理尺寸的jQuery方法：
下面將向您展示如何使用每種方法。
了解jQuery尺寸
請(qǐng)查看下圖，以了解這些方法如何計(jì)算元素框的尺寸。
jQuery width()和height()方法
jQuery width()方法獲取或設(shè)置所選元素的寬度（不包括內(nèi)邊距，邊框和外邊距）。
jQuery height()方法獲取或設(shè)置所選元素的高度（不包括內(nèi)邊距，邊框和外邊距）。
下面的示例獲取DIV元素的寬度和高度：
$("div").click(function(){
let w = $(this).width();
let h = $(this).height();
$(this).html("DIV的寬度: " + w + "<br>" + "DIV的高度: " + h);
});測(cè)試看看?/?下面的示例設(shè)置所有段落的寬度和高度：
$("button").click(function(){
$("p").width(250);
$("p").height(100);
});測(cè)試看看?/?jQuery innerWidth()和innerHeight()方法
jQuery innerWidth()方法獲取或設(shè)置所選元素的寬度（包括內(nèi)邊距）。
jQuery innerHeight()方法獲取或設(shè)置所選元素的高度（包括內(nèi)邊距）。
下面的示例獲取DIV元素的內(nèi)部寬度和內(nèi)部高度：
$("div").click(function(){
let w = $(this).innerWidth();
let h = $(this).innerHeight();
$(this).html("Inner 寬度: " + w + "<br>" + "Inner 高度: " + h);
});測(cè)試看看?/?jQuery externalWidth()和outsideHeight()方法
jQuery outerWidth()方法獲取或設(shè)置所選元素的寬度（包括內(nèi)邊距和邊框）。
jQuery outerHeight()方法獲取或設(shè)置所選元素的高度（包括內(nèi)邊距和邊框）。
以下示例獲取DIV元素的外部寬度和外部高度：
$("div").click(function(){
let w = $(this).outerWidth();
let h = $(this).outerHeight();
$(this).html("Outer 寬度: " + w + "<br>" + "Outer 高度: " + h);
});測(cè)試看看?/?outerWidth(true) 方法獲取或設(shè)置所選元素的寬度（包括內(nèi)邊距，邊框和外邊距）。
outerHeight(true) 該方法獲取或設(shè)置所選元素的高度（包括內(nèi)邊距，邊框和外邊距）。
以下示例獲取DIV元素的外部寬度和外部高度（包括邊距）：
$("div").click(function(){
let w = $(this).outerWidth(true);
let h = $(this).outerHeight(true);
$(this).html("Outer 寬度[+margin]:" + w + "<br>" + "Outer 高度[+margin]: " + h);
});測(cè)試看看?/?更多示例
顯示width()，height()，innerWidth()，innerHeight()，outerWidth()和outerHeight()之間的差異：
$("button").click(function(){
$("div").width();
$("div").innerWidth();
$("div").outerWidth();
$("div").height();
$("div").innerHeight();
$("div").outerHeight();
});測(cè)試看看?/?還可以找到窗口和文檔的寬度和高度：
$(window).width();// 返回瀏覽器窗口的寬度 $(document).width(); // 返回HTML文檔的寬度 $(window).height();// 返回瀏覽器窗口的高度 $(document).height(); // 返回HTML文檔的高度測(cè)試看看?/?
jQuery CSS參考
有關(guān)完整的CSS方法參考，請(qǐng)?jiān)L問我們的jQuery HTML / CSS參考。