我需要知道一个元素是否具有流体宽度。如果真的需要它，我可以详细说明为什么，但我认为不需要。
基本上，是元素N%宽度还是Npx|pt|em|etc宽度？现在我只看到获取当前计算宽度的方法。因此，即使一个元素是 100% 宽，在 JS 中获取值也会返回，例如，500px或者在那个时刻它有多宽。
是否有任何我不知道的黑客或 JS API 来了解这一点或获取原始 CSS 值？
另外，请不要使用 jQuery。这是我的一个JS 库。
问问题
294 次
3 回答
2
您需要使用.window.getComputedStyle那些支持它的浏览器，以及element.currentStyle那些支持它的浏览器。或者你可以使用 jQuery$(element).css('width')来抽象差异（虽然我没有测试过后者）
似乎以下内容并没有达到我的预期，至少在宽度和高度方面没有。在四处搜索之后，我发现了另一个 SO 问题，它被认为是不可能的（至少在不解析样式表的情况下是不可能的？！）。对我来说似乎很生气，我会继续寻找以防万一。
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;
}
}
于 2012-10-14T09:09:09.767 回答
1
您可以使用以下方法检索 CSS 值：
element.style.width
这将返回：
auto - 浏览器设置宽度。这是默认的 长度 - 以长度单位定义宽度 % - 定义父元素的宽度（以 % 为单位） inherit - width 属性的值是从父元素继承的
于 2012-10-14T08:53:18.417 回答
0
于 2012-10-14T09:08:41.867 回答