【问题标题】:How to tell if an element has a fluid width [duplicate]如何判断元素是否具有流体宽度[重复]
【发布时间】:2012-10-14 21:00:30
【问题描述】:

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

我需要知道一个元素是否具有可变宽度。如果真的需要它,我可以详细说明为什么,但我认为不需要。

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

是否有任何我不知道的 hack 或 JS API 来了解这一点或获取原始 CSS 值?

另外,请不要使用 jQuery。这是给我的JS library 的。

【问题讨论】:

  • 现在暂时想不出任何东西,但是您可以遍历styles 对象并挑选出适用于该对象的规则,看看它们是用相对单位指定的还是不是。
  • @MarcB - 我认为这行不通:jsbin.com/erenuw/1/edit
  • 我刚刚更新了一个功能,该功能适用​​于我迄今为止测试过的所有内容 - 这有点疯狂,但它确实有效:) 虽然需要在 IE 中进行测试。

标签: javascript html css


【解决方案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;
  }
}

【讨论】:

  • jsbin.com/uquzin/1/edit - 这只是给了我元素的当前像素宽度。事实上,它看起来像 % 甚至从未出现过,即使它专门设置为 % 值。
  • @OscarGodson - 好点,我有一段时间不用这个了,它总是用来获取源值 - 但是我想我从来没有尝试过它的宽度和高度。 :/似乎没有办法,我会继续寻找。
  • 谢谢!是的,你不能要求原始值似乎很奇怪:)
【解决方案2】:

您可以通过以下方式检索 CSS 值:

element.style.width

将返回:

auto - 浏览器设置宽度。这是默认的 长度 - 以长度单位定义宽度 % - 定义父元素的宽度(以 % 为单位) inherit - width 属性的值是从父元素继承的

从以下位置粘贴的返回值:http://www.w3schools.com/jsref/prop_style_width.asp

【讨论】:

  • 我认为这行不通。 jsbin.com/erenuw/1/edit
  • 如果样式是内联定义的。
  • @WolfgangStengel 是的 - 但是要求我的用户将他们所有的样式都放入我的编辑器内联是丑陋的。我宁愿告诉他们不支持流体宽度,然后要求他们内联样式:\
  • 啊,我没有意识到它只适用于内联样式 - 谢谢。
【解决方案3】:

我想你要找的是什么

getComputedStyle

IE8 及以下版本不支持,但你可以在 IE 中模拟它:http://snipplr.com/view/13523/

【讨论】:

  • jsbin.com/uquzin/1/edit - 这只是给了我元素的当前像素宽度。即使那是给定的宽度,它也不会给我 %。
猜你喜欢
  • 2012-03-30
  • 1970-01-01
  • 2012-10-05
  • 2010-09-25
  • 2011-11-02
  • 1970-01-01
  • 2011-02-22
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多