DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> jQuery基礎知識 >> 5.3 元素的寬度高度width()和height()
5.3 元素的寬度高度width()和height()
編輯:jQuery基礎知識     

在jQuery中,想要獲取或者設置某一個元素的寬度和高度,我們可以使用css()方法來實現。但是jQuery為我們提供了更多方便快速的方法,使得我們更加靈活地操作元素的寬度和高度。

一、元素的寬度

在jQuery中,如果我們想要“獲取”或者“設置”元素的寬度,共有3種方法:

  • (1)width();
  • (2)innerWidth();
  • (3)outerWidth();

其實,這3種方法是根據盒子模型進行區分的。

width()、innerWidth()、outerWidth()三種方法區別 方法 寬度范圍 width() width innerWidth() width + padding outerWidth() width + padding + border

對於這3種獲取或設置元素寬度的方法中,一般情況下我們只用到width()方法 ,對於其他兩種方法,了解一下即可。此外還要注意一點,只有width()方法可以用於window或document對象。

語法:

 
$().width()      //獲取元素的寬度
$().width(n)     //設置元素的寬度,n是一個整數,表示npx

說明:

width()方法和css("width")方法類似,不過width()方法獲得的寬度值不帶單位(僅僅是數字),而css("width")獲取的寬度值帶“px”作為單位,例如:

 
$().width();       //返回數字,例如100
$().css("width");   //返回字符串,例如“100px”

由於width()方法獲得的寬度值是一個數字,使得我們可以方便用來進行數值運算,這在元素定位、計算距離這些方面非常的有用。反而在這種時候,用css("width")就顯得很麻煩了。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css"> 
        #box1,#box2
        {
            display:inline-block;
            width:100px;
            height:60px;
            border:1px solid gray;
        }
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //width()方法獲取元素的寬度
                var a = $("#box1").width();
                alert(a);
            });
            $("#btn2").click(function () {
                //width()方法設置元素的寬度
                $("#box2").width(50);
            });
        })
    </script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div><br />
    獲取第1個div的寬度:<input id="btn1" type="button" value="獲取" /><br />
    設置第2個div的寬度:<input id="btn2" type="button" value="設置" />
</body>
</html>

在浏覽器預覽效果如下:

分析:

這裡要注意一下,使用width()方法對元素設置寬度時不要加單位,像width(50px)這種寫法是錯誤的,正常寫法應該是width(50)。

二、元素的高度

在jQuery中,如果我們想要“獲取”或者“設置”元素的高度,也有3種方法:

  • (1)height();
  • (2)innerHeight();
  • (3)outerHeight();

其實,這3種方法也是根據盒子模型進行區分的。

height()、innerHeight()、outerHeight()三種方法區別 方法 高度范圍 height() height innerHeight () height + padding outerHeight () height + padding + border

對於這3種獲取或設置元素高度的方法中,一般情況下我們只用到height()方法 ,對於其他兩種方法,同樣也是了解一下即可。此外還要注意一點,只有height()方法可以用於window或document對象。

語法:

 
$().height()      //獲取元素的高度
$().height(n)     //設置元素的高度,n是一個整數,表示npx

說明:

height()方法和width()方法的用法一樣,使用height()方法獲取元素的高度是一個數字(不帶單位)。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css"> 
        #box1,#box2
        {
            display:inline-block;
            width:100px;
            height:60px;
            border:1px solid gray;
        }
    </style>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //height()方法獲取元素的高度
                var a = $("#box1").height();
                alert(a);
            });
            $("#btn2").click(function () {
                //height()方法設置元素的高度
                $("#box2").height(100);
            });
        })
    </script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div><br />
    獲取第1個div的高度:<input id="btn1" type="button" value="獲取" /><br />
    設置第2個div的高度:<input id="btn2" type="button" value="設置" />
</body>
</html>

在浏覽器預覽效果如下:

分析:

總結

1、對於元素的寬度和高度操作,我們一般情況下用width()和height()這2種方法就夠了,其他方法了解一下即可。

2、width()和height()使用方法相同,都可以實現2種效果:(1)獲取值;(2)設置值。這個很像我們之前學的html()、text()、val()。這一類既可以獲取值又可以設置值的方法在jQuery中很常見,大家對比理解並記憶一下。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved