使用JavaScript确定元素是否具有固定宽度或百分比宽度 [英] Determine whether element has fixed or percentage width using JavaScript

问题描述

使用 Mootools Element.Dimensions 可以获取计算出的大小，像素。但是，我找不到任何方法来告诉一个元素是否已经使用像素或百分比值（除非在具有内联样式的特殊情况下）。

Using Mootools Element.Dimensions I can get the computed size, in pixels, of any element. However, I can find no way of telling whether an element has been sized using pixel or percentage values (other than in the special case of its having an inline style).

有一个明智的方法这样做吗？我可以想到的唯一的解决方案（这是可怕的，它几乎不值得的名称）是通过文档样式表，寻找匹配目标元素的选择器，然后查看的目标安全性的声明样式。

Is there a sensible way of doing this? The only solution I can think of (which is so hideous that it barely deserves the name) is to walk through the document stylesheets, looking for selectors that match the target element and then looking through the declared styles for the target propety.

背景

我试图将某个类的所有文本区域替换为 CKEditor 实例。理想情况下，具有100％宽度的文本区域将被类似样式的编辑器实例替换 - 因此它们将在窗口大小调整上扩展 - 而固定大小的文本区域将由固定大小的编辑器替换。

I'm attempting to replace all textareas of a certain class with CKEditor instances. Ideally, textareas with 100% width would be replaced by similarly styled editor instances - so they would scale on window resize - while fixed size textareas would be replaced by fixed sized editors.

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

Yes, I could just give them a different class (which I will do if there's no nice solution), but ideally I'd like to be able to drop in my CKEditor script and have everything just work without having to tweak the HTML.

推荐答案

可以做到。查看此问题（为什么getComputedStyle

It can be done. Looking at this question (Why does getComputedStyle return 'auto' for pixels values right after element creation?) gives us the hint.

如果将元素的样式设置为display = none，然后调用getComputedStyle你将获得计算的值（百分比宽度或'auto'或任何样式表应用于元素）而不是像素宽度。

If you set the element's style to display = none and then call getComputedStyle you will get the calculated value (percentage width or 'auto' or whatever the stylesheets apply to the element) instead of the pixel width.

工作代码
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;
  }
}

应该注意，这将导致布局重新呈现，但是，根据您的情况，它可能是一个更简单的解决方案，比遍历所有的样式表规则或克隆元素（这可能导致一些级联规则不应用）。

It should be noted that this will cause the layout to be re-rendered but, depending on your situation, it's probably a simpler solution than traversing all the stylesheet rules or cloning the element (which can cause some cascading rules to not be applied).

这篇关于使用JavaScript确定元素是否具有固定宽度或百分比宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！