如何在纯JavaScript中重现'.width()'jQuery行为，而无需其他库/框架

Question

我知道jQuery中.width()的方法返回元素的宽度，没有填充，边框和边距。

在接受的带有垂直滚动的答案表中，我无法在其中发表评论，这种方法用于获取表格第一行的td元素的宽度。

答案中的一个 jsFiddle 可用于查看该方法返回的值。

我试图用这段代码重现该行为：

let colunas = document.querySelector('.scroll tbody tr:first-child').children;
let colunasWidth = [];
for (let i = 0, length = colunas.length; i < length; i++) {
colunasWidth.push(colunas[i].offsetWidth);//Width/clientWidth
}

我尝试了各种宽度(偏移宽度，宽度，客户端宽度(，没有给出与jQuery相同的结果，然后我尝试从这些不同的宽度中减去边框和填充宽度，但我想不出一种方法来获得数学或正确的属性正确。

有没有一种简单直接的方法可以做到这一点？

Answer 1

你想要window.getComputedStyle和.getPropertyValue它的作用是获取使用的样式，然后获取元素的实际宽度值。

这里有一个jsfiddle向您展示：http://jsfiddle.net/u9d27wno/1/

var jquerywidth = $("#container").width();
var jqueryishwidth = window.getComputedStyle(document.getElementById("container"));
var offsetWidth = document.getElementById('container').offsetWidth;
var clientWidth = document.getElementById('container').clientWidth;
var msg = "offsetWidth: " + offsetWidth + "<br>n";
msg += "clientWidth: " + clientWidth + "<br>n";
msg += "jQuery width: " + jquerywidth + "<br>n";
msg += "jQueryish width: " + jqueryishwidth.getPropertyValue("width") + "<br>n";
document.getElementById('msg').innerHTML = msg;
//alert(document.getElementById('msg').innerHTML);

让我知道这是否是您需要的解决方案！

Answer 2

您可以将element.clientWidth和getComputedStyle一起使用，以获得您正在寻找的值...

元素.客户端宽度

对于没有 CSS 或内联布局框的元素，Element.clientWidth 属性为零，否则它是元素的内部宽度(以像素为单位(。它包括填充，但不包括垂直滚动条(如果存在，如果呈现(、边框或边距。

window.getComputedStyle

window.getComputedStyle(( 方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值。

function width(el){
// get element computed styles
let styles=getComputedStyle(el);
// remove the 'px' from the returned values
let paddingLeft = styles['padding-left'].slice(0,-2);
let paddingRight= styles['padding-right'].slice(0,-2);
// substract paddings from value returned by clientWidth, and return value
return el.clientWidth - paddingLeft - paddingRight;
}
// test
let w = width(document.getElementById('test'))
console.log( 'VanillaJS:' , w )
console.log( 'JQuery : ', $('#test').width())

#test{
border:10px solid red;
width:200px;
margin:10px;
padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
I'm 200px + <br>
10px padding + <br>
10px border +<br>
10px margin
</div>