深入學習jQuery元素尺寸和位置操作

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/09/30/5923469.html
-Advertisement-
Play Games

× 目錄 [1]尺寸設置 [2]位置設置 前面的話 對於javascript來說，元素尺寸有scroll、offset、client三大屬性，以及一個強大的getBoundingClientRect()方法。而jQuery有著對應的更為簡便的方法。本文將詳細介紹jQuery中的元素尺寸和位置操作 尺 ...


×
目錄
[1]尺寸設置 [2]位置設置

前面的話

　　對於javascript來說，元素尺寸有scroll、offset、client三大屬性，以及一個強大的getBoundingClientRect()方法。而jQuery有著對應的更為簡便的方法。本文將詳細介紹jQuery中的元素尺寸和位置操作

 

尺寸設置

　　在CSS中，寬高有三種表示，分別是content-box、padding-box和border-box里的三種寬高。可以分別對應於jQuery中height()/width()、innerHeight()/innerWidth()和outerHeight()/outerWidth()

【1】設置寬高

height()/width()

　　當height()/width()方法中不包含任何參數時，可以獲取設置寬高值

　　css(width)和width()之間的區別在於width()返回一個沒有單位的數值(如400)，而css(width)返回帶有完整單位的字元串(400px)。當然，高度也類似

<div id="test" style="height:30px;width:10em">測試內容</div>
<button id="btn">獲取寬高</button>
<div id="result"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
    $('#result').html('css()獲取的高度:' + $('#test').css('height') + ';css()獲取的寬度:' + $('#test').css('width') + ';height()獲取的高度:' + $('#test').height() + ';width()獲取的寬度:' + $('#test').width());
})
</script>

　　這個方法同樣能計算出window和document的寬高

$(window).width();
$(document).width();
$(window).height();
$(document).height();
<div id="test">測試內容</div>
<button id="btn">獲取寬高</button>
<div id="result"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
    $('#result').html('內容寬:' + $(this).width() +';內容高:' + $(this).height() +　';頁面寬:' + $(document).width() +';頁面高:' + $(document).height() +　';window寬:' + $(window).width() +';window高:' + $(window).height()　)
})
</script>

height(value)/width(value)

　　當height()/width()方法中包含一個參數時，可以設置寬高值。這個參數可以是一個正整數代表的像素數，或是整數和一個可選的附加單位(預設是px)

<div id="test" style="background-color:pink">測試內容</div>
<button id="btn">設置寬高</button>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
    $('#test').height(30).width(100);
})
</script>

height(function(index,currentHeight))/width(function(index,currentWidth))

　　height()/width()方法也可以以一個函數作為參數，該函數接受兩個參數，index參數表示元素在集合中的位置，currentHeight/currentWidth參數表示原來的寬高。在這個函數中，this指向元素集合中的當前元素，最終返回設置的寬高

<button id="btn">設置寬高</button>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 
<script>
$("#btn").click(function(){
    $('div').height(30).css('background-color','orange').width(function(index,currentWidth){
            return currentWidth*(index+1)/10
    })
})
</script>

【2】可視寬高

　　可視寬高指設置寬高加上padding值。在javascript中，可視寬高用clientWidth/clientHeight表示。而在jQuery中，用innerHeight()和innerWidth()方法表示

innerHeight()/innerWidth()

　　innerHeight()/innerWidth()方法不適用於window和document對象，可以使用height()/width()代替

<div id="test" style="width:100px;height:30px;padding:2px;">測試內容</div>
<button id="btn">設置寬高</button>
<div id="result"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
    $('#result').html('設置高:' + $('#test').height() + ';設置寬:' + $('#test').width() + ';可視高:' + $('#test').innerHeight() + ';可視寬:' + $('#test').innerWidth())
})
</script>

【3】全寬高

　　全寬高指設置寬高再加上padding、border、margin(可選)

　　如果獲取border-box的寬高，javascript使用offsetwidth/offsetHeight獲取。而在jQuery中，有著功能更強大的outerWidth()/outerHeight()方法

outerWidth()/outerHeight()

　　outerWidth()/outerHeight()方法用來獲取元素集合中第一個元素的當前計算寬高值，包括padding，border和選擇性的margin。返回一個整數(不包含px)表示的值

　　當參數為false或無參數時，表示不包括margin，否則包括margin

　　[註意]如果在一個空集合上調用該方法，則會返回null

　　outerWidth()/outerHeight()方法不適用於window和document對象，可以使用height()/width()代替

<div id="test" style="width:100px;height:30px;padding:2px;border:1px solid black;margin:10px">測試內容</div>
<button id="btn">設置寬高</button>
<div id="result"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
    $('#result').html('border-box的寬度' + $('#test').outerWidth() + ';border-box的高度' + $('#test').outerHeight() + ';margin-box的寬度' + $('#test').outerWidth(true) + ';margin-box的高度' + $('#test').outerHeight(true))
})
</script>

位置設置

【1】offsetParent()

　　jQuery通過offsetParent()找到元素的定位父級

　　jQuery與javascript有些不同，規則如下

　　1、當元素本身不是fixed定位，且父級元素存在經過定位的元素，offsetParent()的結果為離自身元素最近的經過定位的父級元素

　　2、當元素本身具有fixed定位，或父級元素都未經過定位，則offsetParent()的結果為html

　　3、body元素的offsetParent()的結果也是html

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="position:relative;">
    <div id="test1" style="position:absolute;"></div>
    <div id="test2" style="position:fixed;"></div>
</div>
<script>
console.log($('#test1').offsetParent());//'<div id="box>'
console.log($('#test2').offsetParent());//'<html>'
console.log($('#box').offsetParent());//'<html>'
console.log($('body').offsetParent());//'<html>'
</script>

【2】position()

　　position()方法不接受參數，用來獲取匹配元素中第一個元素的相對於定位父級的坐標

　　position()返回一個包含top和left屬性的對象，相當於javascript中的offsetTop和offsetLeft

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="position:relative;">
    <div id="test1" style="position:absolute;"></div>
    <div id="test2" style="position:fixed;"></div>
</div>
<script>
console.log($('#test1').position().top,$('#test1').position().left);//0 0 
console.log($('#test2').position().top,$('#test2').position().left);//8 8 
</script>

【3】offset()

offset()

　　當offset()方法沒有參數時，在匹配的元素集合中，獲取的第一個元素的當前坐標，坐標相對於文檔　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="position:relative;">
    <div id="test1" style="position:absolute;"></div>
    <div id="test2" style="position:fixed;"></div>
</div>
<script>
console.log($('#test1').offset().top,$('#test1').offset().left);//8 8
console.log($('#test2').offset().top,$('#test2').offset().left);//8 8 
</script>

offset(coordinates)

　　offset()方法可以接受一個包含top和left屬性的對象，用整數指明元素的新頂部和左邊坐標

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">改變按鈕位置</button>
<script>
$('#btn').click(function(){
    $(this).offset({top:20,left:20})
})
</script>

offset(function(index,coords))

　　offset()方法可以接受一個函數作為參數。在函數中，元素在匹配的元素集合中的索引位置作為第一個參數，當前坐標作為第二個參數。這個函數返回一個包含top和left屬性的對象

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">改變按鈕位置</button>
<script>
$('#btn').click(function(){
    $(this).offset(function(index,coords){
        return {left: coords.left + 10, top:coords.top}
    })
})
</script>

【4】scrollTop()/scrollLeft()

scrollTop()/scrollLeft()

　　scrollTop()/scrollLeft()方法不帶參數時，用來獲取匹配元素集合中第一個元素的當前水平或垂直滾動條位置

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>    
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
    內容</div>
<button id='btn'>點擊</button>
<div id="result"></div>
<script>
$('#btn').click(function(){
    $('#result').html('scrollTop:' + $('#test').scrollTop() + ';scrollLeft:' + $('#test').scrollLeft())
})
</script>

scrollLeft(value)/scrollTop(value)

　　scrollTop()/scrollLeft()方法可以接受一個用來設置滾動條水平或垂直位置的正整數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>    
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
    內容</div>
<button id='btn1'>向下滾動</button>
<button id='btn2'>向上滾動</button>
<script>
$('#btn1').click(function(){
    $('#test').scrollTop($('#test').scrollTop() + 10);
})
$('#btn2').click(function(){
    $('#test').scrollTop($('#test').scrollTop() - 10);
})
</script>

最後

　　關於元素的位置和尺寸操作，jQuery把javascript中的scroll、offset、client和getBoundingClientRect()重新整合。對於常用的寬高尺寸設置了width/height、innerWidth/innerHeight、outerWidth/outerHeight這6個方法；而對於位置操作，則設置了position()、offset()/offsetParent()、scrollLeft()/scrollTop()這5個方法

　　歡迎交流


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Jquery Media插件使用，解決線上預覽及打開PDF文件
    用到過PDF的媛媛and猿猿們，總會發現這大千世界之萬能播放器插件，總能少了對媒體控制的介面。 你總會發現PDF無法像img圖片一樣正常載入展現出來，那麼我們在通用語法的基礎上拓展出了適用於預覽及打開的PDF插件便於開發應用。 最主要的是使用到了一個jquery的插件jquery.media.js， ...
  • 第3章 jQuery的DOM操作
    一. DOM 分為DOM核心，HTML-DOM和CSS-DOM 1.DOM核心 不專屬與javascript。 獲取對象：document.getElementsByTagName('div') 獲取屬性：elem.getAtrribute('title') 2.html-DOM document. ...
  • 第2章 jQuery的選擇器
    選擇器是jQuery的根基 一. 認識 1.CSS常用的選擇器 標簽選擇器，後代選擇器，Id選擇器，通配符選擇器，類選擇器，群組選擇器——主流瀏覽器全部支持 偽類選擇器，子選擇器，臨近選擇器等等——不是全部被支持 2.jQuery選擇器 比如有個 <p class="demo">demo</p> C ...
  • 第1章 認識jQuery
    一.常用的JavaScript庫對比 Prototype、Dojo、YUI、Mootools jQuery是一個輕量級的JavaScript庫，大型開發必備——由John Resig於2006年創建。 jQuery的理念是：寫得少做得多。 優勢：簡化了Js的複雜操作，不再關心相容性，大量的實用方法。 ...
  • Javascript單例模式概念與實例
    前言 和其他編程語言一樣，Javascript同樣擁有著很多種設計模式，比如單例模式、代理模式、觀察者模式等，熟練運用Javascript的設計模式可以使我們的代碼邏輯更加清晰，並且更加易於維護和重構。 本文將介紹Javascript模式中較為常見和實用的模式——單例模式，主要分為概念和實例部分。在 ...
  • 表單多文件上傳樣式美化 && 支持選中文件後刪除相關項
    開發中會經常涉及到文件上傳的需求，根據業務不同的需求，有不同的文件上傳情況。 有簡單的單文件上傳，有多文件上傳，因瀏覽器原生的文件上傳樣式及功能的支持度不算太高，很多時候我們會對樣式進行美化，對功能進行完善。 本文根據一個例子，對多文件的上傳樣式做了一些簡單的美化（其實也沒怎麼美化。。），同時支持選 ...
  • 倒計時插件
    總喜歡整理一些小的demo，整合成插件，以後就方便用啦！ 按鈕的倒計時插件，參數直接給到秒數就好！ ...
  • js中offsetHeight、clientHeight、scrollHeight等相關屬性區分總結
    今天再次遇到了offset***、client***、scroll***的這三類屬性的問題，總是混淆，現歸納總結如下： 大體上來說可以這樣理解： client***屬性（clientWidth、clientHeight）: 表示元素可以看到內容的可見區域部分，一般是最後一個對象條以下到狀況欄以上的這 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類