Question

可能重复：
Determine whether element has fixed or percentage width using JavaScript

我需要知道元素是否具有流体宽度。我可以深入了解为什么如果它真的需要，但我不认为它是。

基本上，元素是N%宽度还是Npx|pt|em|etc宽度？现在我只看到获得当前计算宽度的方法。因此，即使一个元素是100％宽，获取JS中的值也会返回500px或者当时的宽度。

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

另外，请不要jQuery。这是我的JS library。

Answer 1

您需要对支持它的浏览器使用window.getComputedStyle，对支持它的用户使用element.currentStyle。或者您可以使用jQuery $(element).css('width')来抽象差异（虽然我没有测试后者） 。

看来以下情况并没有达到我的想象，至少不是宽度和高度。在搜索之后我发现了另一个SO问题，它被认为是不可能的（至少没有解析样式表？！）。似乎疯了我，我要坚持以防万一找。

get CSS rule's percentage value in jQuery

if( window.getComputedStyle ) {
  value = window.getComputedStyle(element,null).width;
} else if( element.currentStyle ) {
  value = element.currentStyle.width;
}

更新

我发现这个有用......！但只适用于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;
  }
}

Answer 2

您可以使用以下方法检索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

返回粘贴的值：http://www.w3schools.com/jsref/prop_style_width.asp

Answer 3

我认为您所寻找的是

getComputedStyle

在IE8及以下版本中不支持，但你可以模仿它IE浏览器：http://snipplr.com/view/13523/

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

3 个答案:

更新

更新2