1、获取窗口的文档显示区的宽度和高度。
//包含滚动条
window.innerHeight
window.innerWidth
//不包含滚动条
document.documentElement.clientHeight
document.documentElement.clientWidth
2、获取document的宽度和高度
//name: width/height
function getWidthOrHeight(name){
doc = document.documentElement;
// Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height],
// whichever is greatest
return Math.max(
document.body[ "scroll" + name ], doc[ "scroll" + name ],
document.body[ "offset" + name ], doc[ "offset" + name ],
doc[ "client" + name ]
);
}
3、获取element的宽度和高度
//elem: 计算样式的元素; name: width/height
function getWidthOrHeight(elem, name){
var view = elem.ownerDocument.defaultView;
if ( !view || !view.opener ) {
view = window;
}
var computed = view.getComputedStyle( elem );
ret = computed.getPropertyValue( name ) || computed[ name ];
if ( ret === "auto" ) {
ret = elem[ "offset" + name[ 0 ].toUpperCase() + name.slice( 1 ) ];
};
return ret;
}
elem.style
:js只能从这个属性获取写在html标签中style属性中的值style="..."
,而无法获取定义在<style type="text/css">...<style>
里面的属性的值。
因此可以使用getComputedStyle()
方法。这个方法接受两个参数:要计算样式的元素和一个伪元素字符串(例如":after"
)。如果不需要伪元素信息,第二个参数可以是null
。getComputerStyle()方法返回一个CSSStyleDeclaration对象,其中包含当前元素的所有计算的样式。