欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談jQuery中height與width

 更新時間：2015年07月06日 09:30:40   投稿：hebedich  
本文給大家簡單談?wù)刯Query中的獲取高度和寬度的height和width方法，這里總結(jié)一下，方便大家更好的理解，有需要的小伙伴可以參考下。

jquery中有三個獲取element高度的方法，分別是:height(),innerHeight(),outerHeght(bool);同樣對應(yīng)的有三個獲取element寬度的方法:width(),innerHeight(),outerHeight(bool),這三個方法分別對應(yīng)怎樣的元素屬性，如下圖所示:

從上面的圖可以了解到:height()方法對應(yīng)頂部style設(shè)置的width屬性;

innerHeight()對應(yīng)width+padding-top+padding-bottom;

outerHeight()對應(yīng)width+padding-top+padding-bottom+border-top+border-bottom;

另外看到下面outerHeight與outerWidth的值不一樣是由于outerWidth(bool)方法參數(shù)被設(shè)置成true，
這時會加上margin-top和margin-bottom;
即:outerWidth = width+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom;

來個簡單的示例吧

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
 $("#id200").width("300px");
 });
});
</script>
</head>
<body>
<div id="id100" style="background:yellow;height:100px;width:100px">HELLO</div>
<div id="id200" style="background:yellow;height:100px;width:100px">W3SCHOOL</div>
<button type="button">請點擊這里</button>
</body>
</html>

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

相關(guān)文章

  • jQuery.Callbacks()回調(diào)函數(shù)隊列用法詳解

    jQuery.Callbacks()回調(diào)函數(shù)隊列用法詳解

    這篇文章主要介紹了jQuery.Callbacks()回調(diào)函數(shù)隊列用法,結(jié)合實例形式詳細(xì)分析了jQuery.Callbacks()回調(diào)函數(shù)隊列的功能、控制標(biāo)志含義與相關(guān)注意事項,需要的朋友可以參考下
    2016-06-06
  • jQuery中bind,live,delegate與one方法的用法及區(qū)別解析

    jQuery中bind,live,delegate與one方法的用法及區(qū)別解析

    本篇文章主要是對jQuery中bind,live,delegate與one方法的用法及區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2013-12-12
  • jQuery+css實現(xiàn)圖片滾動效果(附源碼)

    jQuery+css實現(xiàn)圖片滾動效果(附源碼)

    圖片滾動效果想必大家都已司空見慣了吧，接下來本文介紹下jQuery+CSS實現(xiàn)圖片滾動，感興趣的你可不要錯過了哈，希望可以幫助到你
    2013-03-03
  • jquery數(shù)組過濾篩選方法grep()簡介

    jquery數(shù)組過濾篩選方法grep()簡介

    這篇文章主要介紹了jquery數(shù)組過濾篩選方法grep()簡介,需要的朋友可以參考下
    2014-06-06
  • jquery獲取特定name所有選中的checkbox,支持IE9標(biāo)準(zhǔn)模式

    jquery獲取特定name所有選中的checkbox,支持IE9標(biāo)準(zhǔn)模式

    jquery獲取特定name所有選中的checkbox,支持IE9標(biāo)準(zhǔn)模式，需要的朋友可以參考一下
    2013-03-03
  • jQuery阻止冒泡和HTML默認(rèn)操作

    jQuery阻止冒泡和HTML默認(rèn)操作

    jQuery是一個快捷簡便的JavaScript框架，說道框架可以直接理解為就是對原來底層的東西進(jìn)行了封裝使得開發(fā)者能夠利用這個框架快速開發(fā)。
    2010-11-11
  • jQuery語法小結(jié)(超實用)

    jQuery語法小結(jié)(超實用)

    這篇文章主要介紹了jQuery語法小結(jié)(超實用)，涉及到j(luò)query語法相關(guān)知識，對jquery語法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12
  • DIV隨滾動條滾動而滾動的實現(xiàn)代碼【推薦】

    DIV隨滾動條滾動而滾動的實現(xiàn)代碼【推薦】

    下面小編就為大家?guī)硪黄狣IV隨滾動條滾動而滾動實現(xiàn)代碼【推薦】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-04-04
  • jQuery事件與動畫超詳細(xì)講解

    jQuery事件與動畫超詳細(xì)講解

    在jquery中，jquery動畫事件和動畫函數(shù)經(jīng)常用的到，今天小編抽時間給大家整理了些關(guān)于常用的jquery動畫事件和動畫函數(shù)，對jquery動畫函數(shù)和動畫事件相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2022-12-12
  • jQuery的deferred對象使用詳解

    jQuery的deferred對象使用詳解

    jQuery的開發(fā)速度很快，幾乎每半年一個大版本，每兩個月一個小版本。每個版本都會引入一些新功能。今天我想介紹的，就是從jQuery 1.5.0版本開始引入的一個新功能----deferred對象。
    2011-08-08

最新評論