使用js判断元素的宽度是否由其内容决定？

Question

我想知道是否有一种方法可以使用 jQuery 或 javascript 来确定给定一个元素，其宽度是否由 css 样式（内联、继承或直接）设置，或者是否由其大小/长度确定内容。

Answer 1

我想到了一个想法：

• 存储元素的 .width()

• 删除元素的所有子元素，将它们移到其他地方，或使它们 display: none

• 检查输出元素的 .width()。如果有变化，那就要看内容了。如果没有改变，那就是使用 CSS 设置的。

• 恢复子项的 display 属性或在必要时将其移回原处。

这里是一个非常原始的原型，它只是删除所有元素的内容：

function determineWidth(jQueryElement)
{
   var widthBefore = jQueryElement.width();

  jQueryElement.html(""); // Empty the element

  var widthAfter = jQueryElement.width();

  if (widthAfter != widthBefore)
    var result = "The width depended on the content.";
   else
    var result = "The width did NOT depend on the content.";

  alert("Before: "+widthBefore+" After: "+widthAfter+" - "+result);

}

有块级元素的一个副作用：由于它们的宽度不依赖于内容，因此脚本将返回“...不依赖...”，即使该元素可能没有在 CSS 中设置显式宽度根据您的要求。