• <button id="eiyoe"><acronym id="eiyoe"></acronym></button>
    <em id="eiyoe"></em>

  • <rp id="eiyoe"><acronym id="eiyoe"><input id="eiyoe"></input></acronym></rp>
      查看: 1011|回復: 0
      上一主題 下一主題

      jQuery - 尺寸

      1298

      主題

      0

      好友

      39

      積分

      管理員 離線 發信

      跳轉到指定樓層
      樓主
      發表于 2014-02-19 15:35 | 只看該作者 | 倒序瀏覽

      jQuery - 尺寸

      通過 jQuery,很容易處理元素和瀏覽器窗口的尺寸。

      jQuery 尺寸 方法

      jQuery 提供多個處理尺寸的重要方法:

      • width()
      • height()
      • innerWidth()
      • innerHeight()
      • outerWidth()
      • outerHeight()

      jQuery width() 和 height() 方法

      width() 方法設置或返回元素的寬度(不包括內邊距、邊框或外邊距)。

      height() 方法設置或返回元素的高度(不包括內邊距、邊框或外邊距)。

      下面的例子返回指定的 <div> 元素的寬度和高度:

      實例

      $("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + "</br>"; txt+="Height: " + $("#div1").height(); $("#div1").html(txt);});

      親自試一試

      jQuery innerWidth() 和 innerHeight() 方法

      innerWidth() 方法返回元素的寬度(包括內邊距)。

      innerHeight() 方法返回元素的高度(包括內邊距)。

      下面的例子返回指定的 <div> 元素的 inner-width/height:

      實例

      $("button").click(function(){ var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + "</br>"; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt);});

      親自試一試

      jQuery outerWidth() 和 outerHeight() 方法

      outerWidth() 方法返回元素的寬度(包括內邊距和邊框)。

      outerHeight() 方法返回元素的高度(包括內邊距和邊框)。

      下面的例子返回指定的 <div> 元素的 outer-width/height:

      實例

      $("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + "</br>"; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt);});

      親自試一試

      outerWidth(true) 方法返回元素的寬度(包括內邊距、邊框和外邊距)。

      outerHeight(true) 方法返回元素的高度(包括內邊距、邊框和外邊距)。

      實例

      $("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt);});

      親自試一試

      jQuery - 更多的 width() 和 height()

      下面的例子返回文檔(HTML 文檔)和窗口(瀏覽器視口)的寬度和高度:

      實例

      $("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt);});

      親自試一試

      下面的例子設置指定的 <div> 元素的寬度和高度:

      實例

      $("button").click(function(){ $("#div1").width(500).height(500);});

      親自試一試

      jQuery CSS 參考手冊

      如需關于 jQuery Dimensions 的完整參考,請訪問我們的 jQuery 尺寸參考手冊。

      來源:http://www.w3school.com.cn/jquery/jquery_dimensions.asp