是否有任何等效的跨浏览器API用于获取内容的高度和宽度，但不包括边框大小，填充和边距？我没有使用jQuery的选择。
编辑：忘了提，我也必须支持IE 8。
好吧，我设法解决了。对于除IE <9以外的浏览器，Window.getComputedStyle()均可以使用。在应用活动样式表并解析这些值可能包含的所有基本计算之后，该Window.getComputedStyle()方法将给出元素的所有CSS属性的值。有关更多详细信息，请参见https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle。
IE 8及更早版本存在问题。getComputedStyle是undefined在其中。幸运的是，IE具有专有currentStyle属性，可以从中检索内容width和height。悲哀而真实的是，如果我们宣布width在%在样式表中，它会返回%也。
因此问题仍然存在，我们需要一种将百分比转换为像素值的方法。有一个黑客从院长爱德华兹解决这个问题。多亏他！
var PIXEL = /^\d+(px)?$/i;
function getPixelValue(element, value) {
if (PIXEL.test(value)) return parseInt(value);
var style = element.style.left;
var runtimeStyle = element.runtimeStyle.left;
element.runtimeStyle.left = element.currentStyle.left;
element.style.left = value || 0;
value = element.style.pixelLeft;
element.style.left = style;
element.runtimeStyle.left = runtimeStyle;
return value;
};
因此，最终，使用hack查找内容宽度（用于计算高度的逻辑相同，只是查询高度而不是width的逻辑）的跨浏览器解决方案如下：
假设我们有一个divID为的ID 'container'。在样式表中将其宽度设置为50％。
<style type="text/css">
#container {
width: 50%;
padding: 5px;
}
</style>
测试JavaScript代码：
var container = document.getElementById('container');
if (window.getComputedStyle) {
var computedStyle = getComputedStyle(container, null)
alert("width : "+computedStyle.width);
} else {
alert("width : "+getPixelValue(container,container.currentStyle.width)+'px');
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句