如何判断元素是否具有流体宽度 [英] How to tell if an element has a fluid width

问题描述

可能重复：

使用JavaScript确定元素是否具有固定宽度或百分比宽度

我需要知道一个元素是否有流体宽度。

I need to know if an element has a fluid width or not. I can go into the hairy details of why if it's really needed, but I dont think it is.

基本上，是元素 N％

Basically, is the element N% width or Npx|pt|em|etc width? Right now I only see ways to get the current computed width. So, even if an element is 100% wide, getting the value in JS returns, like, 500px or however wide it is at that moment.

有没有任何hack或JS API我不知道知道这个或得到原始的CSS值？

Are there any hacks or JS API's I dont know about to know this or to get the original CSS value?

此外，请不要jQuery 。这是我的 JS库。

Also, please no jQuery. This is for a JS library of mine.

推荐答案

您需要为支持它的浏览器使用 window.getComputedStyle ，并且 element.currentStyle 那些支持。或者你可以使用jQuery $（element）.css（'width'）它应该抽象差异（虽然我没有测试后者） > 。

You need to use window.getComputedStyle for those browsers that support it, and element.currentStyle for those that support that. Or you could use jQuery $(element).css('width') which should abstract the difference (although I haven't tested the latter).

看起来下面的内容并不是我想象的，至少不是宽度和高度。搜索后，我发现这个其他的问题，它被声明是不可能的（至少不是没有解析样式表？！）。似乎对我疯狂，我会继续寻找以防万一。

It seems the following does not do what I had thought it would, at least not for width and height. After searching around I found this other SO question where it is stated to be impossible (at least not without parsing the Stylesheet?!). Seems mad to me, I shall keep looking just in case.

在jQuery中获取CSS规则的百分比

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

更新

我发现这个工作...！但只对firefox :(对我来说，如果元素没有计算它的宽度反对（即它不是文档流的一部分），它应该返回它的原始值是有意义的：

update

I've found that this works...! but only for firefox :( To me it would make sense that if the element has nothing to compute it's width against (i.e. it's not part of the document flow) it should return it's original value:

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 );
}

$ b b

（尚未测试IE）

(have not tested for IE)

还有另一个例子，我同意FireFox的实现，并在Chrome或Safari 。

Yet again another instance of where I agree with FireFox's implementation and frown at Chrome or Safari.

好吧，不是被计算机击败的粉丝;这个功能 - 完全在顶部，但它似乎工作。再次，我还没有测试这个在IE上，因为我没有一个Windows机器手。这是令人讨厌的，当原来的FF只有版本是相当简洁，但这里的逻辑是声音 - 它回到一个正常的人会测试如果东西是弹性的做。

Ok, not a fan of being defeated by computers ;) so have come up with this function -- totally over the top, but it does seem to work. Again I have yet to test this on IE as I don't have a Windows machine to hand at the moment. It's annoying when the original FF only version is quite succinct, but the logic here is sound - it falls back to what a normal human would do in testing if something is stretchy.

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;
  }
}

这篇关于如何判断元素是否具有流体宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！