javascript - 如何使页面中的元素与另一个元素具有完全相同的视觉宽度？

Question

我正在尝试使元素A的宽度等于B的宽度 以便它们在视觉上看起来是相同的。

我尝试这样做:

$('#A').css('max-width', $('#B').css('width'));

但这并不按照我想要的方式工作，因为B的宽度是83%，所以 A的最大宽度变为83%。

这不会使 A 在视觉上相同，因为它只是占其父元素的 83%，这使其在页面上显得更大。

有没有办法计算 B 的视觉宽度，以便我可以使用 jQuery 将其用作 A 的最大宽度？

编辑:我无法编辑文档结构。

Answer 1

仅通过 JavaScript，offsetWidth应该做:

The HTMLElement.offsetWidth read-only property returns the layout width of an element as an integer.

var myW = document.querySelector("#a").offsetWidth;
document.querySelector("#b").style.width=myW+"px";

p {float:left;clear:left;border:solid;margin:1px 1em;box-sizing:border-box;}

<p id="a">some content to give a width</p>
<p id="b">:</p>