offsetWidth获取对象宽度
offsetHeight:获取对象高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
简单的例子：就是
<div id="container" style="position:absolute;width:200px;height:200px">
<div id="content" style="position:absolute;width:200px;height:200px">></div>
</div>
<script>
var element =documentById("content");
alert(element.style.width)//是可以获得width，但是是不包括的border的，此外css样式必须是内嵌的
alert(element.offsetHeight);//这样就可以获得所需要的宽度，即使是一个img对象
//如果没有内容及width等属性，offsetWidth为browser的宽度，offsetHeight为0
</script>
复杂例子
下面考虑到offsetTop，他主要是针对包含的对象，所以有时候我们就一直往上考虑元素在文本坐标中的位置
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#test{
position:absolute;
width:200px;
height:200px;
background:#0000FF;
left:100px;
top:80px;
}
</style>
<script language="javascript" type="text/javascript">
var eventUtil = {};
eventUtil.eventHander = function(eventType,element,func){
if(element.addEventListener){
element.addEventListener(eventType,func,false);
}else if(element.attachEvent){
element.attachEvent("on"+eventType,func);
}else{
element["on"+eventType] = func;
}
}
eventUtil.removeEventHander = function(eventType,element,func){
if(element.addEventListener){
element.removeEventListener(eventType,func,false);
}else if(element.attachEvent){
element.detachEvent("on"+eventType,func);
}else{
element["on"+eventType] = null;
}
}
function funcLoad(){
var d =document.getElementById("test");
alert(getOffSetTop(d));
}
function getOffSetTop(obj){
var top = 0;
while(obj){
top += obj.offsetTop;
obj = obj.offsetParent;
alert(obj.nodeName)
}
return top ;
}
//这就是offsetTop是相对于最近的包装元素，所以可以最后一直循环才行
//offsetWidth是获得当前元素的宽，包括图像，当匀速没有内容，无边框，width，height时候，默认的为browser的宽
//
eventUtil.eventHander("load",window,funcLoad);
</script>
</head>
<body>
<div style="position:absolute;left:200px;top:100px">
dsadsadsa<br/>
asdasdsa<br/>
dsadsadsadsadsadsa<br/>
<div id="test">
</div>
</div>
下面一个滚动，当然元素要有overflow属性了，auto，hidden，visible,scroll，滚动相对于body标签，我就直接给例子，滚动的实现
scrollHeight: 获取对象的滚动高度。
scrollWidth:获取对象的滚动宽度
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
例子一：
<style type="text/css">
#stu{
position:absolute;
top:100px;
left:100px;
}
//fixed相当对于html元素，不会变
//position是相对于body的，所以这个会产生滚动
</style>
<script>
function test(){
var t =document.getElementById("stu");
if(document.body.clientWidth){
t.style.top = 100+document.body.scrollTop+"px";
t.style.left =100+document.body.scrollLeft+"px";
}else if(document.documentElement&&document.documentElement.clientWidth){
t.style.top = 100+document.documentElement.scrollTop+"px";
t.style.left =100+document.documentElement.scrollLeft+"px";
}
}
</script>
</head>
<body οnscrοll="test()">
<form>
<textarea cols="300" rows="300" name="text"></textarea>
<img src="语句.jpg" id="stu"/></form>
</form>
</body>
</html>
保证元素在屏幕的固定位置，不过最好position：fixed，全面一种是拖动刷新
例子二，无间隙滚动
<style type="text/css">
body{
padding:0;
margin :0;
}
#container{
border:1px solid red;
width:200px;
height:200px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="content1">
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
asddddddddddddddddddddd<br/>
</div>
<br/>
<div id="content2">
</div>
</div>
<script>
var moveElement =document.getElementById("container");
var element1 =document.getElementById("content1");
var element2=document.getElementById("content2");
element2.innerHTML = element1.innerHTML
function move(){
if(element2.offsetTop -moveElement.scrollTop<=0){
moveElement.scrollTop -=element2.offsetTop;
}
moveElement.scrollTop++;
// document.title = moveElement.scrollTop+"新的content的高度"+ element2.offsetTop+"新的"+element1.offsetTop;
}
setInterval("move()",30);
</script>
</body>
</html>
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
扫一扫
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
