深入學習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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類