本节主要讲解JavaScript一些位置属性，并通过实例来进一步熟悉和运用。
style.top
style.left
offsetWidth
offsetHeight
offsetTop
offsetLeft
scrollHeight
scrollWidth
scrollTop
scrollLeft
例1 offsetWidth是自身的宽度one.offsetWidth（他的样式可以不在标签里）等同与one.style.width(他的样式必须写在标签里面)
<body>
<div id="one" style="width:100px;height:100px;background:blue;></div>
<script>
var one=document.getElementById("one");
alert(one.offsetWidth);
</script>
</body>
以后就用offsetWidth
例2 就会出现图片的高度
<body>
<img src="121.jpg" id="one">
<script>
var one=document.getElementById("one");
alert(one.offsetHeight);
</script>
</body>
例3 获取当前div距离浏览器的位置
<style>
body{margin:0px;
padding:0px
}
</style>
<body>
<div style="position:absolute;top:80px;left:100px">
<div style="position:absolute;top:100px;left:100px">
aaaaaaaaaaa<br>
aaaaaaaaaaa<br>
aaaaaaaaaaa<br>
aaaaaaaaaaa<br>
aaaaaaaaaaa<br>
aaaaaaaaaaa<br>
aaaaaaaaaaa<br>
<div id="one">aaaaaaaa</div>
</div>
</div>
<script>
var one=document.getElementById("one");
alert(getOffsetTop(one));
function getOffsetTop(obj){
var loc=0;
while(obj){
if(obj.nodeName="HTML")
break;
loc+=obj.offsetTop;
obj=obj.parentNode;
}
return loc;
}
</script>
</body>
例4
<style>
#tu{
position:absolute;
top:100px;
left:100px;
}
</style>
<body οnscrοll="test() ">
<textarea cols="1000" rows="1000"></textarea>
<img src="bbs.gif" id="tu">
<script>
function test(){
var tu=document.getElementById("tu");
function test(){
tu.style.top=100+document.body.scrollTop;
tu.style.left=100+document.body.scrollLeft;
}
}
</script>
</body>
例5 与例4效果相同
<!DOCTYPE html PUBLIC................dtd>
<style>
#tu{
position:fixed;
top:100px;
left:100px;
}
</style>
<body>
<textarea cols="100" rows="1000"></textarea>
<img src="bbs.gif" id="tu">
</body>
例6
<html>
<head>
<style>
#test{
width:200px;
height:200px;
border:1px solid red;
overflow:hidden;
}
</style>
</head>
<body>
<div id="test">
<div id="test1">
1aaaaaaaaaaa<br>
2aaaaaaaaaaa<br>
3aaaaaaaaaaa<br>
4aaaaaaaaaaa<br>
5aaaaaaaaaaa<br>
6aaaaaaaaaaa<br>
7aaaaaaaaaaa<br>
8aaaaaaaaaaa<br>
9aaaaaaaaaaa<br>
<br>
</div>
<div id="test2">
</div>
<script>
var test=document.getElementById("test");
var test1=document.getElementById("test1");
var test2=document.getElementById("test2") ;
test2.innerHTML=test1.innerHTML;
function move(){
if(test2.scrollHeight-test.scrollTop<=0){
test.scrollTop-=test1.offsetHeight;
}
test.scrollTop++;
window.document.title=test.scrollTop+",test1.offsetTop="+test2.offsetTop;
}
setInterval ("move()",100);
</script>
</body>
</html>
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
