做網(wǎng)站不備案,海南省建設(shè)廳網(wǎng)站,深圳做網(wǎng)站哪家公司比較好而且不貴,先做網(wǎng)站先備案前端新手必看#xff1a;精準(zhǔn)獲取元素寬高不再踩坑#xff08;附實(shí)戰(zhàn)技巧避雷指南#xff09;前端新手必看#xff1a;精準(zhǔn)獲取元素寬高不再踩坑#xff08;附實(shí)戰(zhàn)技巧避雷指南#xff09;引言——為什么你量到的尺寸永遠(yuǎn)像“薛定諤的貓”先拆盒子——content-box 與 bor…前端新手必看精準(zhǔn)獲取元素寬高不再踩坑附實(shí)戰(zhàn)技巧避雷指南前端新手必看精準(zhǔn)獲取元素寬高不再踩坑附實(shí)戰(zhàn)技巧避雷指南引言——為什么你量到的尺寸永遠(yuǎn)像“薛定諤的貓”先拆盒子——content-box 與 border-box 的“宮斗劇”1. 標(biāo)準(zhǔn)盒模型content-box2. IE 異端盒模型border-box3. 滾動(dòng)條——藏在角落里的“第三者”4. transform——“靈魂出竅”的元兇getComputedStyle——“樣式檔案室”的館長(zhǎng)1. 它能給你什么2. 單位陷阱——“em、%、auto”三連坑3. 別拿它做“實(shí)時(shí)量尺”getBoundingClientRect——“像素級(jí)卷尺”1. 基本用法2. transform 的“靈異事件”3. 高清屏的“小數(shù)點(diǎn)”性能修羅場(chǎng)——重排與強(qiáng)制同步布局1. 什么是強(qiáng)制同步布局FSL2. 批量讀寫(xiě)避免 FSL3. requestAnimationFrame 防抖實(shí)戰(zhàn)場(chǎng)景一動(dòng)態(tài)彈窗——“內(nèi)容多高我就多高”實(shí)戰(zhàn)場(chǎng)景二瀑布流——“卡片高度各不同我要一一記錄”實(shí)戰(zhàn)場(chǎng)景三懶加載 IntersectionObserver——“露頭再加載”踩坑實(shí)錄——“我遇到鬼了”1. getComputedStyle 返回 auto怎么辦2. 頁(yè)面縮放zoom導(dǎo)致 getBoundingClientRect 失真3. display:none 時(shí)兩個(gè) API 都“失明”高手私藏——一行代碼搞定所有邊界ResizeObserver——“尺寸變了我第一時(shí)間告訴你”SSR 與 JSDOM——“后端也想量尺寸”結(jié)語(yǔ)——“像素級(jí)掌控”不是夢(mèng)前端新手必看精準(zhǔn)獲取元素寬高不再踩坑附實(shí)戰(zhàn)技巧避雷指南“哥我明明寫(xiě)了height: 100px控制臺(tái)里卻死活拿不到 100”“別急你看到的只是 CSS 的‘嘴炮’瀏覽器真正畫(huà)出來(lái)的才是‘肉身’?！币浴獮槭裁茨懔康降某叽缬肋h(yuǎn)像“薛定諤的貓”幾乎每個(gè)前端都在某個(gè)深夜被“元素尺寸”狠狠坑過(guò)彈窗位置永遠(yuǎn)偏半像素、瀑布流卡片忽高忽低、懶加載圖片剛露頭就閃退……你打開(kāi) DevTools對(duì)著offsetWidth和clientHeight兩眼發(fā)直——它們像渣男嘴上說(shuō)愛(ài)你實(shí)際給的根本不是你想要的。罪魁禍?zhǔn)撞⒉皇悄愣菫g覽器盒模型這一“暗箱”。CSS 里寫(xiě)下的width: 200px可能只是 content-box 里的“理想國(guó)”真正占位的還要加上 padding、border甚至滾動(dòng)條、transform、zoom 這些“隱形刺客”。于是讀尺寸這件事成了一場(chǎng)“盲人摸象”。今天我們就把大象牽出來(lái)從頭到尾摸一遍先拆盒模型再聊兩個(gè)最常用卻最容易誤用的 API——getComputedStyle與getBoundingClientRect接著用一堆“血淚案例”告訴你什么時(shí)候該用誰(shuí)、怎么組合、如何不掉坑最后送上“老司機(jī)工具包”讓你一行代碼就能拿到“像素級(jí)”精準(zhǔn)數(shù)據(jù)。準(zhǔn)備好咖啡咱們開(kāi)摸——哦不開(kāi)講。先拆盒子——content-box 與 border-box 的“宮斗劇”1. 標(biāo)準(zhǔn)盒模型content-box.box{width:200px;padding:10px;border:5px solid;}在 content-box 模式下width只負(fù)責(zé) content 區(qū)域。所以真實(shí)占位 200 10×2 5×2 230 px。很多新同學(xué)直接讀el.style.width一看 200就天真地以為這就是“全部”結(jié)果布局一跑就崩。2. IE 異端盒模型border-box.box{box-sizing:border-box;width:200px;padding:10px;border:5px solid;}此時(shí)width已經(jīng)包含了 padding bordercontent 區(qū)域被壓縮成 200 - 10×2 - 5×2 170 px。真實(shí)占位 200 px與 CSS 寫(xiě)的完全一致。所以想“所見(jiàn)即所得”請(qǐng)把box-sizing: border-box寫(xiě)進(jìn) reset.css別再猶豫。3. 滾動(dòng)條——藏在角落里的“第三者”.scroll{width:200px;height:100px;overflow:auto;}當(dāng)內(nèi)容溢出出現(xiàn)滾動(dòng)條時(shí)滾動(dòng)條會(huì)吃掉部分 content 空間。在 Windows 上經(jīng)典滾動(dòng)條寬約 17 pxmacOS 上可能 0 px重疊式。這意味著同樣一行代碼在不同系統(tǒng)上量到的 clientWidth 可能不一樣。做精密布局時(shí)別忘了給它留“備胎”寬度。4. transform——“靈魂出竅”的元兇.ghost{transform:scale(0.5);}元素在視覺(jué)上縮小了一半但 DOM 占位紋絲不動(dòng)。此時(shí)offsetWidth依舊按原尺寸匯報(bào)而getBoundingClientRect會(huì)如實(shí)返回縮放后的像素級(jí)大小。后面我們會(huì)用代碼驗(yàn)證先埋個(gè)包袱。getComputedStyle——“樣式檔案室”的館長(zhǎng)1. 它能給你什么conststylewindow.getComputedStyle(el);console.log(style.width);// 190.375pxconsole.log(style.height);// auto返回的是渲染后的最終樣式顏色、字體、寬高都能查到。但注意所有值都是字符串帶單位且不可寫(xiě)。如果 CSS 里寫(xiě)的是height: auto它絕不會(huì)好心幫你算成像素——auto 就是 auto一字不差。2. 單位陷阱——“em、%、auto”三連坑.parent{font-size:16px;}.child{width:50%;height:10em;}constchilddocument.querySelector(.child);conststgetComputedStyle(child);console.log(st.width);// 50% ← 依然是百分比console.log(st.height);// 160px ← 計(jì)算后的像素規(guī)則百分比相對(duì)于包含塊getComputedStyle 不會(huì)幫你轉(zhuǎn)換成 px除非瀏覽器已經(jīng)布局完。em/rem會(huì)被換算成 px因?yàn)樽煮w大小已確定。auto紋絲不動(dòng)你拿不到具體數(shù)字。3. 別拿它做“實(shí)時(shí)量尺”// ? 錯(cuò)誤示范想拿 auto 高度if(parseFloat(st.height)100){// 這里永遠(yuǎn)是 NaN 或 0}正確姿勢(shì)getComputedStyle 只負(fù)責(zé)“樣式聲明”不負(fù)責(zé)“布局結(jié)果”。要想拿到“真實(shí)像素”請(qǐng)轉(zhuǎn)戰(zhàn)getBoundingClientRect或clientHeight。getBoundingClientRect——“像素級(jí)卷尺”1. 基本用法constrectel.getBoundingClientRect();console.log(rect.width);// 190.375console.log(rect.height);// 300.25返回浮點(diǎn)數(shù)單位是像素已經(jīng)包含 padding border。坐標(biāo)相對(duì)于視口滾動(dòng)不影響 width/height但會(huì)改變 top/left。不會(huì)受到box-sizing影響因?yàn)樗褪恰爱?huà)出來(lái)”的尺寸。2. transform 的“靈異事件”divclassghostGhost/divstyle.ghost{width:100px;height:100px;transform:scale(1.5);}/stylescriptconstrdocument.querySelector(.ghost).getBoundingClientRect();console.log(r.width);// 150 ← 已經(jīng)乘了 1.5/script看到?jīng)]getBoundingClientRect 把 transform 也算了進(jìn)去而offsetWidth還是 100。所以做拖拽、碰撞檢測(cè)時(shí)請(qǐng)務(wù)必用 getBoundingClientRect否則元素都“靈魂出竅”了你還拿舊尺寸肯定撞墻。3. 高清屏的“小數(shù)點(diǎn)”DPR 2 的手機(jī)上CSS 寫(xiě) 100 px實(shí)際物理像素 200。getBoundingClientRect 依舊返回100單位是CSS 像素不是物理像素。別被“高清”嚇壞布局邏輯只認(rèn) CSS 像素。性能修羅場(chǎng)——重排與強(qiáng)制同步布局1. 什么是強(qiáng)制同步布局FSL// ? 典型 FSLel.style.width100px;console.log(el.offsetHeight);// 強(qiáng)制瀏覽器立即布局先寫(xiě)后讀瀏覽器為了給你最新高度不得不立即重排。放在循環(huán)里就是性能核彈。2. 批量讀寫(xiě)避免 FSL// ? goodconstwidthel.offsetWidth;// 讀el.style.heightwidthpx;// 寫(xiě)先讀后寫(xiě)瀏覽器可以一次性把寫(xiě)操作緩存起來(lái)下一幀統(tǒng)一刷新。工具函數(shù)里把所有讀放一起所有寫(xiě)放一起性能立省 80%。3. requestAnimationFrame 防抖letrafId;functiononResize(){cancelAnimationFrame(rafId);rafIdrequestAnimationFrame((){constrectbox.getBoundingClientRect();// 安全讀取不觸發(fā) FSL});}window.addEventListener(resize,onResize);把所有尺寸讀取放進(jìn)requestAnimationFrame瀏覽器會(huì)在下一幀布局完成后再回調(diào)零重排順滑如絲。實(shí)戰(zhàn)場(chǎng)景一動(dòng)態(tài)彈窗——“內(nèi)容多高我就多高”需求彈窗高度由內(nèi)容撐開(kāi)但最大不超過(guò)視口 80%。如果超出內(nèi)部滾動(dòng)。/** * 獲取元素“真實(shí)”占用尺寸 * 隱藏元素也能測(cè) */functionmeasure(el){constplaceholderel.cloneNode(true);Object.assign(placeholder.style,{position:fixed,left:-9999px,top:-9999px,visibility:hidden,display:block,transform:none// 去掉 transform 干擾});document.body.appendChild(placeholder);constrectplaceholder.getBoundingClientRect();document.body.removeChild(placeholder);return{width:rect.width,height:rect.height};}functionadjustDialog(){constdialogdocument.querySelector(.dialog);constbodydialog.querySelector(.dialog-body);const{height}measure(body);constmaxwindow.innerHeight*0.8;body.style.maxHeightMath.min(height,max)px;body.style.overflowheightmax?auto:visible;}亮點(diǎn)克隆節(jié)點(diǎn) visibility:hidden跳過(guò) display:none 的“失明”。去掉 transform防止縮放干擾。一次性讀取零重排。實(shí)戰(zhàn)場(chǎng)景二瀑布流——“卡片高度各不同我要一一記錄”classWaterfall{constructor(container,col3){this.containercontainer;this.colcol;this.colTopsnewArray(col).fill(0);// 每列當(dāng)前高度}asyncaddItem(el){// 1. 先插入到容器讓瀏覽器渲染el.style.positionabsolute;// 脫離文檔流不占位this.container.appendChild(el);// 2. 讀取高度const{height}el.getBoundingClientRect();// 3. 找最短的列constminTopMath.min(...this.colTops);constidxthis.colTops.indexOf(minTop);// 4. 定位constcolWidththis.container.clientWidth/this.col;el.style.leftidx*colWidthpx;el.style.topminToppx;// 5. 更新列高this.colTops[idx]height20;// 20 是下邊距}}// 使用constwfnewWaterfall(document.querySelector(.waterfall),3);items.forEach(itemwf.addItem(item));注意必須先插入 DOM瀏覽器渲染后才能讀到高度。用position:absolute讓元素不占文檔流避免反復(fù)重排。所有讀操作集中在前寫(xiě)操作定位集中在后性能最佳。實(shí)戰(zhàn)場(chǎng)景三懶加載 IntersectionObserver——“露頭再加載”constimgsdocument.querySelectorAll(img[data-src]);constionewIntersectionObserver(entries{entries.forEach(en{if(en.isIntersecting){constimgen.target;// 占位圖替換真實(shí)地址img.srcimg.dataset.src;io.unobserve(img);}});},{rootMargin:50px,// 提前 50px 開(kāi)始加載threshold:0.01});imgs.forEach(imgio.observe(img));問(wèn)題如果圖片沒(méi)設(shè)置高度首次進(jìn)入視口時(shí)en.boundingClientRect.height可能是 0導(dǎo)致重復(fù)觸發(fā)或計(jì)算錯(cuò)誤。解決提前在 CSS 里給占位圖一個(gè)固定寬高比img{display:block;width:100%;height:auto;aspect-ratio:16 / 9;/* 新標(biāo)準(zhǔn)老瀏覽器用 padding-hack */}這樣即使 src 是空瀏覽器也能算出高度IntersectionObserver 就能精準(zhǔn)判斷進(jìn)入時(shí)機(jī)。踩坑實(shí)錄——“我遇到鬼了”1. getComputedStyle 返回 auto怎么辦場(chǎng)景父元素高度由子元素?fù)伍_(kāi)你想拿父高做動(dòng)畫(huà)結(jié)果拿到auto。急救包functiongetRealHeight(el){constoldel.style.display;el.style.displayblock;// 強(qiáng)制渲染consthel.getBoundingClientRect().height;el.style.displayold;returnh;}代價(jià)短暫閃一下慎用或者直接用前面的measure克隆法零閃屏。2. 頁(yè)面縮放zoom導(dǎo)致 getBoundingClientRect 失真document.body.style.zoom1.25;constrel.getBoundingClientRect();console.log(r.width);// 比原始值大 25%結(jié)論getBoundingClientRect 返回的是CSS 像素 × zoom如果你要做拖拽定位記得把 zoom 算回去constzoomwindow.devicePixelRatio/(window.outerWidth/window.innerWidth);constrealr.width/zoom;3. display:none 時(shí)兩個(gè) API 都“失明”真相元素不在渲染樹(shù)瀏覽器根本沒(méi)畫(huà)自然拿不到尺寸。唯一解法先讓它可見(jiàn)但不占位.ghost-measure{position:absolute;visibility:hidden;display:block!important;}測(cè)完再刪前面 clone 法已經(jīng)示范。高手私藏——一行代碼搞定所有邊界/** * 終極尺寸工具 * param {HTMLElement} el * param {Boolean} ignoreTransform // 是否忽略 transform * return {Object} {width, height} */exportfunctiongetElementSize(el,ignoreTransformfalse){if(!el)return{width:0,height:0};// 隱藏元素特殊處理constisHiddenwindow.getComputedStyle(el).displaynone;letnodeel;if(isHidden){nodeel.cloneNode(true);Object.assign(node.style,{display:block,position:absolute,visibility:hidden,transform:none,left:-9999px});document.body.appendChild(node);}constrectnode.getBoundingClientRect();constwidthignoreTransform?node.offsetWidth:rect.width;constheightignoreTransform?node.offsetHeight:rect.height;if(isHidden)document.body.removeChild(node);return{width:Math.round(width),height:Math.round(height)};}特點(diǎn)自動(dòng)識(shí)別display:none克隆測(cè)量零副作用。可選ignoreTransform應(yīng)對(duì)縮放場(chǎng)景。返回整數(shù)避免小數(shù)點(diǎn)漂移。ResizeObserver——“尺寸變了我第一時(shí)間告訴你”constronewResizeObserver(entries{entries.forEach(en{const{inlineSize:width,blockSize:height}en.contentBoxSize[0];console.log(新尺寸,width,height);// 觸發(fā)重排業(yè)務(wù)});});ro.observe(document.querySelector(.box));優(yōu)勢(shì)原生監(jiān)聽(tīng)比 window.resize 精準(zhǔn)一萬(wàn)倍。內(nèi)容區(qū)、邊框區(qū)、設(shè)備像素比都能區(qū)分。性能爆棚零手動(dòng)輪詢。兼容現(xiàn)代瀏覽器 100%老 IE 直接埋了吧。SSR 與 JSDOM——“后端也想量尺寸”Node 里沒(méi)有渲染樹(shù)getBoundingClientRect 直接 undefined。解決方案用JSDOM css-layout模擬import{JSDOM}fromjsdom;importcomputeLayoutfromcss-layout;consthtmldiv stylewidth:200px;padding:10px;/div;constdomnewJSDOM(html);consteldom.window.document.querySelector(div);// 手動(dòng)計(jì)算constlayoutcomputeLayout({style:{width:200,padding:10},children:[]});console.log(layout.width);// 220注意只能做靜態(tài)布局沒(méi)有字體渲染、沒(méi)有浮動(dòng)塌陷。精度有限僅供服務(wù)端骨架屏或單元測(cè)試。結(jié)語(yǔ)——“像素級(jí)掌控”不是夢(mèng)別再被offsetWidth和style.width這對(duì)“塑料兄弟”騙了也別再讓auto和transform牽著鼻子走。記住一句話“樣式找 computed占位找 rect隱藏先克隆變化用 observer?！卑呀裉爝@篇收藏 星標(biāo) 抄代碼下次再遇到“尺寸不對(duì)”你就能三秒定位、五秒修復(fù)然后準(zhǔn)點(diǎn)下班去擼串。祝你編碼愉快像素從此聽(tīng)你號(hào)令。歡迎來(lái)到我的博客很高興能夠在這里和您見(jiàn)面希望您在這里可以感受到一份輕松愉快的氛圍不僅可以獲得有趣的內(nèi)容和知識(shí)也可以暢所欲言、分享您的想法和見(jiàn)解。推薦DTcode7的博客首頁(yè)。一個(gè)做過(guò)前端開(kāi)發(fā)的產(chǎn)品經(jīng)理經(jīng)歷過(guò)睿智產(chǎn)品的折磨導(dǎo)致脫發(fā)之后勵(lì)志要翻身農(nóng)奴把歌唱一邊打入敵人內(nèi)部一邊持續(xù)提升自己為我們廣大開(kāi)發(fā)同胞謀福祉堅(jiān)決抵制睿智產(chǎn)品折磨我們碼農(nóng)兄弟專欄系列點(diǎn)擊解鎖學(xué)習(xí)路線(點(diǎn)擊解鎖知識(shí)定位《微信小程序相關(guān)博客》持續(xù)更新中~結(jié)合微信官方原生框架、uniapp等小程序框架記錄請(qǐng)求、封裝、tabbar、UI組件的學(xué)習(xí)記錄和使用技巧等《AIGC相關(guān)博客》持續(xù)更新中~AIGC、AI生產(chǎn)力工具的介紹例如stable diffusion這種的AI繪畫(huà)工具安裝、使用、技巧等總結(jié)《HTML網(wǎng)站開(kāi)發(fā)相關(guān)》《前端基礎(chǔ)入門(mén)三大核心之html相關(guān)博客》前端基礎(chǔ)入門(mén)三大核心之html板塊的內(nèi)容入坑前端或者輔助學(xué)習(xí)的必看知識(shí)《前端基礎(chǔ)入門(mén)三大核心之JS相關(guān)博客》前端JS是JavaScript語(yǔ)言在網(wǎng)頁(yè)開(kāi)發(fā)中的應(yīng)用負(fù)責(zé)實(shí)現(xiàn)交互效果和動(dòng)態(tài)內(nèi)容。它與HTML和CSS并稱前端三劍客共同構(gòu)建用戶界面。通過(guò)操作DOM元素、響應(yīng)事件、發(fā)起網(wǎng)絡(luò)請(qǐng)求等JS使頁(yè)面能夠響應(yīng)用戶行為實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)展示和頁(yè)面流暢跳轉(zhuǎn)是現(xiàn)代Web開(kāi)發(fā)的核心《前端基礎(chǔ)入門(mén)三大核心之CSS相關(guān)博客》介紹前端開(kāi)發(fā)中遇到的CSS疑問(wèn)和各種奇妙的CSS語(yǔ)法同時(shí)收集精美的CSS效果代碼用來(lái)豐富你的web網(wǎng)頁(yè)《canvas繪圖相關(guān)博客》Canvas是HTML5中用于繪制圖形的元素通過(guò)JavaScript及其提供的繪圖API開(kāi)發(fā)者可以在網(wǎng)頁(yè)上繪制出各種復(fù)雜的圖形、動(dòng)畫(huà)和圖像效果。Canvas提供了高度的靈活性和控制力使得前端繪圖技術(shù)更加豐富和多樣化《Vue實(shí)戰(zhàn)相關(guān)博客》持續(xù)更新中~詳細(xì)總結(jié)了常用UI庫(kù)elementUI的使用技巧以及Vue的學(xué)習(xí)之旅《python相關(guān)博客》持續(xù)更新中~Python簡(jiǎn)潔易學(xué)的編程語(yǔ)言強(qiáng)大到足以應(yīng)對(duì)各種應(yīng)用場(chǎng)景是編程新手的理想選擇也是專業(yè)人士的得力工具《sql數(shù)據(jù)庫(kù)相關(guān)博客》持續(xù)更新中~SQL數(shù)據(jù)庫(kù)高效管理數(shù)據(jù)的利器學(xué)會(huì)SQL輕松駕馭結(jié)構(gòu)化數(shù)據(jù)解鎖數(shù)據(jù)分析與挖掘的無(wú)限可能《算法系列相關(guān)博客》持續(xù)更新中~算法與數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)總結(jié)通過(guò)JS來(lái)編寫(xiě)處理復(fù)雜有趣的算法問(wèn)題提升你的技術(shù)思維《IT信息技術(shù)相關(guān)博客》持續(xù)更新中~作為信息化人員所需要掌握的底層技術(shù)涉及軟件開(kāi)發(fā)、網(wǎng)絡(luò)建設(shè)、系統(tǒng)維護(hù)等領(lǐng)域的知識(shí)《信息化人員基礎(chǔ)技能知識(shí)相關(guān)博客》無(wú)論你是開(kāi)發(fā)、產(chǎn)品、實(shí)施、經(jīng)理只要是從事信息化相關(guān)行業(yè)的人員都應(yīng)該掌握這些信息化的基礎(chǔ)知識(shí)可以不精通但是一定要了解避免日常工作中貽笑大方《信息化技能面試寶典相關(guān)博客》涉及信息化相關(guān)工作基礎(chǔ)知識(shí)和面試技巧提升自我能力與面試通過(guò)率擴(kuò)展知識(shí)面《前端開(kāi)發(fā)習(xí)慣與小技巧相關(guān)博客》持續(xù)更新中~羅列常用的開(kāi)發(fā)工具使用技巧,如 Vscode快捷鍵操作、Git、CMD、游覽器控制臺(tái)等《photoshop相關(guān)博客》持續(xù)更新中~基礎(chǔ)的PS學(xué)習(xí)記錄含括PPI與DPI、物理像素dp、邏輯像素dip、矢量圖和位圖以及幀動(dòng)畫(huà)等的學(xué)習(xí)總結(jié)日常開(kāi)發(fā)辦公生產(chǎn)【實(shí)用工具】分享相關(guān)博客》持續(xù)更新中~分享介紹各種開(kāi)發(fā)中、工作中、個(gè)人生產(chǎn)以及學(xué)習(xí)上的工具豐富閱歷給大家提供處理事情的更多角度學(xué)習(xí)了解更多的便利工具如Fiddler抓包、辦公快捷鍵、虛擬機(jī)VMware等工具吾輩才疏學(xué)淺摹寫(xiě)之作恐有瑕疵。望諸君海涵賜教。望輕噴嚶嚶嚶非常期待和您一起在這個(gè)小小的網(wǎng)絡(luò)世界里共同探索、學(xué)習(xí)和成長(zhǎng)。愿斯文對(duì)汝有所裨益縱其簡(jiǎn)陋未及淵博亦足以略盡綿薄之力。倘若尚存闕漏敬請(qǐng)不吝斧正俾便精進(jìn)