如何通過 javascript 以像素為單位獲取引導網格行或網格容器寬度

Question

如何通過 javascript 獲取引導網格行或網格容器寬度（以像素為單位）。

我將 aurelia 用於 javascript 但代碼可以是標准 js（請不要使用 jquery）。

我試圖在 bootstrap 網站上找到這個，但我仍然感到困惑，因為寬度有幾個維度：col-xs、colmd ......但實際上，我們只是使用 4 個維度：col-3、col-6、 col-9，col-12，僅此而已，所以基本上我需要獲得完整的寬度才能將像素再次轉換為 col-x 以匹配從 HTML 元素調整大小。

Answer 1

使用 document.querySelectorAll("your html 查詢")[0].offsetWidth 獲取您的元素。

此命令將返回以像素為單位的元素寬度，包括填充。

我在 jsFiddle 中做了一個例子：

https://jsfiddle.net/dgf0okrj/

document.querySelectorAll("your html query")[0].offsetWidth

只需打開您的控制台並運行它。

Answer 2

您可以在 css 中更新引導行或容器或列的寬度和最大寬度：

.row{
 max-width: 200px !important;
 width: 200px !important;
}

或者，您也可以使用 % 更新寬度，但請記住始終更新 css 中的最大寬度。

Answer 3

要獲取網格或行或任何元素的寬度（以像素為單位），您可以執行以下操作：

const pixels = document.querySelector('.grid').clientWidth;