[Note]位置属性

来源：互联网发布：聚合数据是什么意思编辑：程序博客网时间：2024/06/09 00:10

style.top

style.left

<body><div id="one"></div><script>var one=document.getElementById("one");alert(one.style.width);alert(one.offsetWidth);</script></body>

offsetWidth
offsetHeight
offsetTop//距离上一级的顶top的偏移距离
offsetLeft

<style>body{margin:0px;padding:0px;}</style><body><div style="position:absolute;top:80px;left:100px"><div style="position:absolute;top:80px;left:100px">asdfghjkl<br>asdfghjkl<br>asdfghjkl<br>asdfghjkl<br>asdfghjkl<br><div id="one">asdfghjkl</div></div></body><script>var one=document.getElementById("one");alert(getOffestTop(one));function getOffsetTop(obj){var loc=0;while(obj){if(obj.nodeName=="HTML")break;loc+=obj.offsetTop;obj=obj.parentNode;}return loc;}</script>

scrollHeight
scrollWidth
scrollTop
scrollLeft

<style>/*vsersion 1.0 拖动滚动条图片位置不变*/#tu{position:absolute;top:100px;left:100px;}</style><body onscroll="test"><textarea cols="1000" row="1000"></textarea><image src="bbs.gif" id="tu"><script>var tu=document.getElementById("tu");function test(){tu.style.top=100+document.body.scrollTop;tu.style.left=100+document.body.scrollLeft;}</script></body>/*vsersion 2.0 拖动滚动条图片位置不变*/<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><style>#tu{position:fixed;/*此时需要dtd文件并完善html头部才能生效，相对html固定，而scroll是相对于body体的*/top:100px;left:100px;}</style></head><body onscroll="test"><textarea cols="1000" row="1000"></textarea><image src="bbs.gif" id="tu"></body></html>

文字滚动

<html><head><style>#test{width:200px;height:200px;border 1px solid red;overflow:hidden;}</style></head><body><div id="test"><div id="test1">asdfghjkl<br>asdfghjkl<br>asdfghjkl<br>asdfghjkl<br>asdfghjkl<br>asdfghjkl<br>asdfghjkl<br>asdfghjkl<br>asdfghjkl<br>asdfghjkl<br>asdfghjkl<br></div><div id="test2"></div></div><script>var test=document.getElementById("test");var test1=document.getElementById("test1");var test2=document.getElementById("test2");test2.innerHTML=test1.innerHTMl;function move(){if(test1.offsetHeight-test.scroll<=0){test.scrollTop-=test1.offsetHeight;}test.scrollTop++;}setInterval("move()",30);</script></body></html>

图片来自于baidu

阅读全文

0 0