1.滚动条距离
window.pageXOffset/pageYOffset
IE8 : document.body/documentElement.scrollLeft/scrollTop(兼容性比较混乱,用时取两个值相加,因为不可能存在两个同时有值)
封装函数 解决兼容性问题
<script type="text/javascript">
function getScrollOffset() {
if(window.pageXOffset) {
x : window.pageXoffset,
y : window.pageYoffset
}
else{
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop,
}
}
}
</script>
2.查看视口的尺寸
window.innerWidth/innerHeight
封装函数 解决兼容性问题
.
<script type="text/javascript">
function getSViewportOffset() {
if(window.innerWidth) {
return {
w : window.innerWidth,
h : window.innerHeight
}
}else{
if(document.compatMode ==="BackCompat") {
return {
w : document.body.clienWidth,
h : document.body.clientHeight
}
}else{
return {
w : document.documentElement.clientWidth,
h : document.documrntElement.clientHeight
}
}
}
</script>
3、查看元素的几何尺寸:
domEle.getBoundingClientRect(); //(返回结果不是实时的)
4、查看元素的尺寸:
dom.offsetWidth,dom.offsetHeight.
5、查看元素的位置:
dom.offsetLeft,dom.offsetTop.
6.最终显示样式获取
window.getComputedStyle(div, null).width
window.getComputedStyle(div,"after").width (获取div伪元素的样式)