Javascript 如何判断图元是否具有流体宽度

可能重复：

我需要知道元素是否具有流体宽度。如果真的需要的话，我可以详细说明为什么，但我认为不是

基本上，元素是

N%

宽度还是

Npx | pt | em | etc

宽度？现在我只看到了获得当前计算宽度的方法。因此，即使一个元素是100%宽的，在JS中获取值也会返回，比如，

500px

，或者不管它当时有多宽

是否有任何黑客或JS API的我不知道要知道这一点或获得原始的CSS值

---

另外，请不要使用jQuery。这是给我的一位同事的。

您可以使用以下方法检索CSS值：

element.style.width

将返回：

auto - The browser sets the width. This is default length - Defines the width in length units % - Defines the width in % of the parent element inherit - The value of the width property is inherited from parent element 自动-浏览器设置宽度。这是默认值 长度-以长度单位定义宽度 %-以父元素的百分比定义宽度 继承-宽度属性的值从父元素继承

---

返回粘贴自以下位置的值：

我认为您需要的是getComputedStyle

getComputedStyle IE8及以下版本不支持它，但您可以模拟它，例如：

对于支持它的浏览器，您需要使用

window.getComputedStyle

，对于支持它的浏览器，您需要使用

元素.currentStyle

。或者您可以使用jQuery

$（element.css（'width'）

，它应该能够提取差异（尽管我还没有测试后者）

下面的内容似乎不像我想象的那样，至少在宽度和高度上是这样。在四处搜索之后，我发现了另一个SO问题，它被认为是不可能的（至少在没有解析样式表的情况下是不可能的）。看来我疯了，我会继续找以防万一

更新 我发现这是有效的。。。！但仅适用于firefox：（对我来说，如果元素没有可计算其宽度的内容（即，它不是文档流的一部分），那么它应该返回其原始值：

function isElementFluid(elm){
  var clone = elm.cloneNode(false);
  if( window.getComputedStyle ) {
    value = window.getComputedStyle(clone,null).width;
  } else if( clone.currentStyle ) {
    value = clone.currentStyle.width;
  }
  return (value && String(value).indexOf('%') != -1 );
}

（未进行IE测试）

又一次，我同意FireFox的实现，对Chrome或Safari表示不满

更新2 好吧，我不喜欢被电脑打败；）所以我想出了这个函数——完全超出了极限，但它似乎确实有效。再一次，我还没有在IE上测试这一点，因为我现在手头没有Windows机器。当最初的只使用FF的版本非常简洁时，这很烦人，但这里的逻辑是合理的——它回到了正常人在测试是否有弹性时会做的事情

function isElementFluid(elm){
  var wrapper, clone = elm.cloneNode(false), ow, p1, p2;
  if( window.getComputedStyle ) {
    value = window.getComputedStyle(clone,null).width;
  } else if( clone.currentStyle ) {
    value = clone.currentStyle.width;
  }
  /// the browsers that fail to work as Firefox does
  /// return an empty width value, so here we fall back.
  if ( !value ) {
    /// remove styles that can get in the way
    clone.style.margin = '0';
    clone.style.padding = '0';
    clone.style.maxWidth = 'none';
    clone.style.minWidth = 'none';
    /// create a wrapper that we can control, my reason for
    /// using an unknown element is that it stands less chance
    /// of being affected by stylesheets - this could be improved
    /// to avoid possible erroneous results by overriding more css
    /// attributes with inline styles.
    wrapper = document.createElement('wrapper');
    wrapper.style.display = 'block';
    wrapper.style.width = '500px';
    wrapper.style.padding = '0';
    wrapper.style.margin = '0';
    wrapper.appendChild(clone);
    /// insert the element in the same location as our target
    elm.parentNode.insertBefore(wrapper,elm);
    /// store the clone's calculated width
    ow = clone.offsetWidth;
    /// change the wrapper size once more
    wrapper.style.width = '600px';
    /// if the new width is the same as before, most likely a fixed width
    if( clone.offsetWidth == ow ){
      /// tidy up
      elm.parentNode.removeChild(wrapper);
      return false;
    }
    /// otherwise, calculate the percentages each time - if they
    /// match then it's likely this is a fluid element
    else {
      p1 = Math.floor(100/500*ow);
      p2 = Math.floor(100/600*clone.offsetWidth);
      /// tidy up
      elm.parentNode.removeChild(wrapper);
      return (p1 == p2) ? Math.round(p1)+'%' : false;
    }
  }
  else {
    p1 = (value && String(value).indexOf('%') != -1);
    return p1 ? value : false;
  }
}

---

现在想不出任何东西，但你可以在

样式

对象中滚动，找出适用于该对象的规则，看看它们是否用相对单位指定。@MarcB-我认为这不起作用：我刚刚更新了一个函数，它适用于我迄今为止测试的所有东西-有点疯狂，但它确实起到了作用：）需要在IE中进行测试。我认为这不管用。如果样式是内联定义的，它会起作用。@wolfganstengel是的-但是要求我的用户将他们所有的样式都内联到我的编辑器中是很难看的。我宁愿告诉他们流体宽度不受支持，然后要求他们内联设置样式：\啊，我还没意识到这只适用于内联样式-谢谢。-这就是元素当前的px宽度。事实上，

%

即使被特别设置为

%

值，它看起来也从来没有出现过。@OscarGodson-很好的一点，我已经有一段时间没有使用过它了，它总是用来获取源值-但是我想我从来没有尝试过宽度和高度。：/这似乎是疯了，没有办法-我将继续寻找。谢谢！是的，看起来很奇怪，你不能要求原始值：）-这只是给了我元素当前的px宽度。它不会给我%的宽度，即使这是给定的宽度。

function isElementFluid(elm){
  var wrapper, clone = elm.cloneNode(false), ow, p1, p2;
  if( window.getComputedStyle ) {
    value = window.getComputedStyle(clone,null).width;
  } else if( clone.currentStyle ) {
    value = clone.currentStyle.width;
  }
  /// the browsers that fail to work as Firefox does
  /// return an empty width value, so here we fall back.
  if ( !value ) {
    /// remove styles that can get in the way
    clone.style.margin = '0';
    clone.style.padding = '0';
    clone.style.maxWidth = 'none';
    clone.style.minWidth = 'none';
    /// create a wrapper that we can control, my reason for
    /// using an unknown element is that it stands less chance
    /// of being affected by stylesheets - this could be improved
    /// to avoid possible erroneous results by overriding more css
    /// attributes with inline styles.
    wrapper = document.createElement('wrapper');
    wrapper.style.display = 'block';
    wrapper.style.width = '500px';
    wrapper.style.padding = '0';
    wrapper.style.margin = '0';
    wrapper.appendChild(clone);
    /// insert the element in the same location as our target
    elm.parentNode.insertBefore(wrapper,elm);
    /// store the clone's calculated width
    ow = clone.offsetWidth;
    /// change the wrapper size once more
    wrapper.style.width = '600px';
    /// if the new width is the same as before, most likely a fixed width
    if( clone.offsetWidth == ow ){
      /// tidy up
      elm.parentNode.removeChild(wrapper);
      return false;
    }
    /// otherwise, calculate the percentages each time - if they
    /// match then it's likely this is a fluid element
    else {
      p1 = Math.floor(100/500*ow);
      p2 = Math.floor(100/600*clone.offsetWidth);
      /// tidy up
      elm.parentNode.removeChild(wrapper);
      return (p1 == p2) ? Math.round(p1)+'%' : false;
    }
  }
  else {
    p1 = (value && String(value).indexOf('%') != -1);
    return p1 ? value : false;
  }
}