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

Question

使用Mootools Element.Dimensions，我可以获得任何元素的计算大小（以像素为单位）。但是，我无法分辨出是否已使用像素值或百分比值确定了元素的大小（在特殊情况下（具有内联样式））。

有这样做的明智方法吗？我能想到的唯一解决方案（这太可怕了，几乎不值得使用该名称）是遍历文档样式表，查找与目标元素匹配的选择器，然后遍历声明的样式以获取目标属性。

背景

我试图用CKEditor实例替换某个类的所有textarea 。理想情况下，宽度为100％的textarea将由样式相似的编辑器实例替换-因此它们将根据窗口调整大小进行缩放-而固定大小的textareas将由固定大小的编辑器替换。

是的，我可以给他们一个不同的类（如果没有很好的解决方案，我会这样做），但是理想情况下，我希望能够放入CKEditor脚本并使所有工作都可以进行，而无需调整HTML。

Answer 1

可以办到。看着这个问题（为什么getComputedStyle在元素创建后立即为像素值返回'auto'？）给出了提示。

如果将元素的样式设置为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;
  }
}

应当注意，这将导致重新渲染布局，但根据您的情况，这可能比遍历所有样式表规则或克隆元素（这可能导致某些级联规则无法应用）更为简单。