javascript - 使用 JavaScript 确定元素的宽度是固定宽度还是百分比宽度

Question

使用 Mootools Element.Dimensions我可以获得任何元素的计算大小(以像素为单位)。但是，我找不到任何方法来判断元素的大小是否已使用像素值或百分比值(除了具有内联样式的特殊情况)。

有没有一个明智的方法来做到这一点？我能想到的唯一解决方案(它是如此可怕以至于它几乎不值得这个名字)是遍历文档样式表，寻找与目标元素匹配的选择器，然后查看目标属性的声明样式。

背景

我正在尝试用 CKEditor 替换某个类的所有文本区域实例。理想情况下，宽度为 100% 的文本区域将替换为类似样式的编辑器实例 - 因此它们将在窗口调整大小时缩放 - 而固定大小的文本区域将替换为固定大小的编辑器。

是的，我可以给他们一个不同的类(如果没有好的解决方案我会这样做)，但理想情况下我希望能够放入我的 CKEditor 脚本并让一切正常工作而无需调整HTML。

Answer 1

这是可以做到的。查看这个问题 (Why does getComputedStyle return 'auto' for pixels values right after element creation?) 给了我们提示。

如果您将元素的样式设置为 display = none，然后调用 getComputedStyle，您将获得计算值(百分比宽度或“自动”或样式表应用于该元素的任何内容)而不是像素宽度。

工作代码jsfiddle https://jsfiddle.net/wtxayrnm/1/

function getComputedCSSValue(ele, prop) {
  var resolvedVal = window.getComputedStyle(ele)[prop];
  //does this return a pixel based value?
  if (/px/.test(resolvedVal)) {
    var origDisplay = ele.style.display;
    ele.style.display = 'none';
    var computedVal = window.getComputedStyle(ele)[prop];
    //restore original display
    ele.style.display = origDisplay;
    return computedVal;
  } else {
    return resolvedVal;
  }
}

需要注意的是，这会导致重新渲染布局，但根据您的情况，这可能是比遍历所有样式表规则或克隆元素(这可能导致某些级联规则不可用)更简单的解决方案应用)。