【技術分享】WEB前端全棧成長計劃(二階段)-jQuery之DOM進階篇(3)
前兩篇我們已經學習了如何通過jQuery操作DOM文檔添加和修改html的各種元素，在各種示例演示過程中相信大家已經發現通過js進行的各種操作在瀏覽器中是無刷新更新的，這對于用戶來說是非常好的體驗，但大家有沒有關注到一個問題就是窗口尺寸的變化，當我們使用靜態布局的時候使用的是自己開發環境的瀏覽器尺寸，在無法確認客戶瀏覽器的尺寸的情況下，我們的靜態布局在別人電腦上的可視效果會大打折扣，那我們如何解決這個問題呢?jQuery中也給我們提供了處理html元素尺寸方法。
本篇主要講解如何通過jQuery來處理html元素尺寸,并通過獲取body的尺寸來設定我們設置的html元素尺寸，來處理客戶端上瀏覽器的尺寸變化的響應。
尺寸方法
jQuery提供了多個處理尺寸的方法
width() 設置或獲取html元素的寬度，不包括邊框和內外邊距
height() 設置或獲取html元素的高度，不包括邊框和內外邊距
innerWidth() 獲取html元素的寬度，僅包括內邊距
innerHeiht() 獲取html元素的高度，僅包括內邊距
outerWidth() 獲取html元素的寬度，僅包括邊框和內邊距
outerHeight() 獲取html元素的高度，僅包括邊框和內邊距
擴展閱讀：window 瀏覽器對象模型（BOM）
擴展部份可自行學習，主要是了解一下如何通過JavaScript獲取瀏覽器window屬性的方法
演示代碼通用部份
????
width() 、height()使用
width() 設置或獲取html元素的寬度，不包括邊框和內外邊距
height() 設置或獲取html元素的高度，不包括邊框和內外邊距
innerWidth()、innerHeight()使用
innerWidth() 獲取html元素的寬度，僅包括內邊距
innerHeiht() 獲取html元素的高度，僅包括內邊距
outerWidth()、outerHeight()使用
outerWidth() 獲取html元素的寬度，僅包括邊框和內邊距
outerHeight() 獲取html元素的高度，僅包括邊框和內邊距
根據body尺寸設置html元素尺寸
通過prompt模擬body的尺寸來改變div1的大小,當靜態布局完成后,我們可以根據body的尺寸來改變我們布局中html元素的各種屬性來保證客戶端窗口顯示效果，當然現在有很多成熟的前端框架本身都具備這種能力，在這里只是例舉一個思路。
box-sizing 屬性的影響
當html元素設置box-sizing屬性后，通過width/innerWidth/outerWidth()等方法獲取元素width屬性時會減去padding和border的值,height方法獲取時也亦是如此。
????
寫到這里jQuery之DOM進階篇就結束了，希望能對和我一樣的初學者有所幫助！
書山有路勤為徑，學海無涯苦作舟!!!
zhoubo
2020.8.10 at home
jQuery
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
