我正在制作一個可以根據螢屏寬度在桌面和移動版本之間轉換的導航欄。
與@media (min-width: ${minWidth}px)用于切換的Bootstrap 導航欄不同，
我使用 JavaScript 進行溢位檢測，通過比較$0.clientWidth& $0.scrollWidth。
問題是，paddingRight沒有減去$0.clientWidth，所以檢測是不準確的。
我想獲得沒有填充的實際客戶端寬度，如 Chrome 的頁面檢查器所示。
如圖中綠色矩形所示：
筆記：
- 我不能通過添加
::after填充右側來應用 hack ，因為容器是一個網格，從而導致丑陋的列間隙。 - 我無法將 marginRight 應用于選單，因為邊距將填充 gridArea。
這是我的導航欄的模型。
請關注 .js 檔案：
uj5u.com熱心網友回復：
如果您使用串列，我的意思是如果您的結構像
<ul>
<li>
<a href="#">
</a>
</li>
</ul>
然后給paddinganchor標簽，然后得到li標簽的寬度，你的問題就解決了
uj5u.com熱心網友回復：
基本上你想要沒有填充的元素的實際寬度，你可以通過使用javascript來實作
<script>
function getWidth() {
var elemWidth =
document.getElementById("navbar").offsetWidth;
alert(elemWidth);
}
</script>
總之，訣竅是offsetWidth獲取元素內部寬度。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/338016.html
標籤：javascript html css dom
上一篇：從資料庫中獲取后如何傳遞道具