<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>位置处理</title>
<style>
body{
margin:0;
padding: 0;
height: 2000px;
}
.container_out {
width: 1000px;
overflow: hidden;
}
#container{
display: none;
width:200px;
/*width:10%;*/
/*position: absolute;*/
height: 200px;
border:2px solid red;
padding: 10px;
margin:10px;
background-color:yellowgreen;
}
.coordinate_out {
position: relative;
top:100px;
left:100px;
width: 500px;
}
#coordinate{
left:100px;
top:250px;
height:30px;
width: 30px;
background: #9ACD32;
position: absolute;
border: 2px solid red;
}
#scroll {
position: fixed;
bottom: 0;
}
</style>
</head>
<body>
<div class="container_out">
<div id="container"></div>
</div>
<div class="coordinate_out">
<div id="coordinate"></div>
</div>
<p id="scroll"></p>
<script type="text/javascript">
/**
* 打印
*/
function write(str) {
document.write(str + '<br/>');
}
var container = document.getElementById('container');
/**
* 使用CSS,px %,不设置
*/
var cssWidth = getStyle(container, 'width');
write('width:'+cssWidth);
/**
* offsetWidth、offsetHeight
*/
var offsetWidth = container.offsetWidth;
write('offsetWidth:'+offsetWidth);
/**
* innerWidth、innerHeight、outerWidth和outerHeight
*/
var innerWidth = window.innerWidth;
write('innerWidth:'+innerWidth);
var outerWidth = window.outerWidth;
write('outerWidth:'+outerWidth);
/**
* clientWidth、clientHeight
* 标准模式：document.documentElement.clientWidth
* 怪异模式：document.body.clientWidth
*/
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
write('clientWidth:'+clientWidth);
/**
* offsetWidth、offsetHeight
*/
var offsetWidth = document.documentElement.offsetWidth;
write('offsetWidth:'+offsetWidth);
/**
* scrollWidth、scrollHeight
*/
var scrollWidth = document.documentElement.scrollWidth;
write('scrollWidth:'+scrollWidth);
/**
* 通用获取CSS属性
*/
function getStyle(el, name) {
if(window.getComputedStyle) {//标准浏览器
return window.getComputedStyle(el, null).getPropertyValue(name);
}else {//IE浏览器
//需要变成驼峰方式
name = name.replace(/\-(\w)/g, function(word, first) {
return first.toUpperCase();
});
return el.currentStyle.getAttribute(name);
}
}
//坐标
var coordinate = document.getElementById('coordinate');
/**
* getBoundingClientRect
*/
var bounding = coordinate.getBoundingClientRect();
var top2 = bounding.top;
var left = bounding.left;
var width = bounding.width;
var height = bounding.height;
write('top:'+top2);
write('left:'+left);
write('width:'+width);
write('height:'+height);
/**
* 累加计算offset
*/
var offset = offsetSum(coordinate);
write('offset-top:'+offset.top);
write('offset-left:'+offset.left);
/**
* 累加页面坐标
*/
function offsetSum(node) {
var top=0, left=0
while(node) {
top = top + parseInt(node.offsetTop);
left = left + parseInt(node.offsetLeft);
node = node.offsetParent;
}
return {top: top, left: left}
}
/**
* clientTop clientLeft
*/
var client_top = coordinate.clientTop;
var client_left = coordinate.clientLeft;
write('client-top:'+client_top);
write('client-left:'+client_left);
/**
* pageYOffset scrollTop pageXOffset scrollLeft
*/
var page_YOffset = window.pageYOffset;
var page_escrollTop = document.documentElement.scrollTop;
var page_bscrollTop = document.body.scrollTop;
write('page-YOffset:'+page_YOffset);
write('element-scrollTop:'+page_escrollTop);
write('body-scrollTop:'+page_bscrollTop);
window.onscroll = function() {
var onscroll_top = document.documentElement.scrollTop;
document.getElementById('scroll').innerHTML = 'scrollTop:' + onscroll_top;
}
</script>
</body>
</html>
