记录几个控制位置,坐标和obj的长宽的东西........

女爷i 2022-08-24 05:10 151阅读 0赞

以前写过一遍，在新浪的bolg上,但是看着是保存成功了,可是第2天就找不到了。

**offsetWidth**  :        目标元素的宽度，     用法obj.offsetWidth

**offsetHeight** :        目标元素的高度，     用法obj,offsetHeight

ie  ff都可以   不过在ff下不能用来算body的高度（这么算 他的高度是等于页面里面元素的高度的）

记录一个简单的例子。

<body><div id="ss" style=" height:300px; width:400px; border:1px solid \#000000"></div></body>  
<script>  
alert("div的高度是："+document.getElementById("ss").offsetHeight+"　　宽度："+document.getElementById("ss").offsetWidth)  
alert("页面的高度是："+document.body.offsetHeight+"　　宽度："+document.body.offsetWidth)  
</script>

可以看出  当有边框的时候  ff下的div的宽度 和ie下的宽度是不一样。

**clientWidth **  :       目标元素的宽度，     用法obj.clientWidth

**clientHeight ** :       目标元素的高度，     用法obj,clientHeight

记录一个简单的例子

<body><div id="ss" style=" height:300px; width:400px; border:1px solid \#000000"></div></body>  
<script>  
alert("div的高度是："+document.getElementById("ss").clientHeight+"　　宽度："+document.getElementById("ss").clientWidth)  
alert("页面的高度是："+document.body.clientHeight+"　　宽度："+document.body.clientWidth)  
</script>

嘿嘿  可以alert()出body的高度了。

**offsetLeft**   :           目标元素离父元素的水平距离，     用法obj.offsetLeft

**offsetTop**   :            目标元素离父元素的垂直距离，      用法obj.offsetTop

记录一个简单的例子

<body><div id="ss" style=" height:300px; width:400px; border:1px solid \#000000">  
<div id="sss" style=" height:150px; width:200px; border:1px solid \#000000; margin-left:50px;"></div>  
</body></div>  
<script>  
alert("宽　　"+document.getElementById("ss").offsetLeft+"高 　　"+document.getElementById("ss").offsetTop)  
alert("宽　　"+document.getElementById("sss").offsetLeft+"高 　　"+document.getElementById("sss").offsetTop)  
</script>

有点不明白  问问老大去。。。。。。。。。。。

**clientLeft**

**clientTop                     没用过也没看见别人用过  就不研究了..**

**offsetX** :   目标元素相对于父元素的x坐标                           只有触发鼠标事件的时候才有这个方法.......

**offsetY** :   目标元素相对于父元素的y坐标

在FF下是  **pageX  pageY**

记录一个例子

<body><div id="ss" style="height:400px; width:400px; border:1px solid \#000000"></div></body>  
<script>  
document.getElementById("ss").οnmοusemοve=function(event)  
\{  
 var e =event||window.event  
   if(document.all)  
     \{document.getElementById("ss").innerHTML="X:"+e.offsetX+"　Y:"+e.offsetY\}  
   else  
     \{document.getElementById("ss").innerHTML="X:"+e.pageX+"　Y:"+e.pageY\}   
\}  
</script>

**clientX**:   目标元素相对于浏览器的x坐标                             只有触发鼠标事件的时候才有这个方法.......

**clientY**:   目标元素相对于浏览器的y坐标

记录一个简单的例子

<body><div id="ss" style="height:400px; width:400px; border:1px solid \#000000"></div></body>  
<script>  
document.getElementById("ss").οnmοusemοve=function(event)  
\{  
 var e =event||window.event  
     \{document.getElementById("ss").innerHTML="X:"+e.clientX+"　Y:"+e.clientY\}  
\}  
</script>

**screenX** :       鼠标相对于整个浏览器X的坐标

**screenY** :        鼠标相对于整个浏览器Y的坐标

记录一个例子

<body><div id="ss"></div></body>  
<script>  
document.οnmοusemοve=function(event)\{  
var e = event || window.event  
document.getElementById("ss").innerHTML="X："+e.screenX+"　Y："+e.screenY\}  
</script>

**scrollWidth:**   滚动条的宽度

**scrollHeigjt:**   滚动条的高度

**scrollTop ** :    滚动条滑块的垂直距离

**scrollLeft** :     滚动条滑块的水平距离

记录一个简单的例子方便理解

<body>  
<div id="ss" style="height:300px; width:400px; overflow:scroll; border:1px solid \#000000">  
<div  style="height:500px; width:500px; border:1px solid \#000000"></div>  
</div>  
<div id="sss"></div>  
</body>  
<script>  
var div =document.getElementById("ss")  
div.οnscrοll=function()\{  
document.getElementById("sss").innerHTML="scrollHeight :"+div.scrollHeight+"　scrollWidth："+div.scrollWidth+"　scrollTop :"+div.scrollTop+"　scrollLeft :"+div.scrollLeft\}  
</script>

顺手写3个例子

第一个  一个一直定位于右下角的一个div

<body><div id="ss" style="height:200px; width:200px; background-color:\#FF0000; position:absolute"></div>  
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></body>  
<script>  
var div = document.getElementById("ss")  
var top = document.body.clientHeight-div.offsetHeight  
function change()  
\{   
   div.style.left=document.body.clientWidth-div.offsetWidth  
   div.style.top =document.body.clientHeight-div.offsetHeight+document.body.scrollTop  
   top = document.body.clientHeight-div.offsetHeight  
\}  
change()  
window.οnresize=change  
window.οnscrοll=function()\{div.style.top=top+document.body.scrollTop\}  
</script>

第二个  一个一直居中的div

<body><div id="ss" style="height:200px; width:200px; background-color:\#FF0000; position:absolute"></div>  
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></body>  
<script>  
var div  = document.getElementById("ss")  
var top  = (document.body.clientHeight-div.offsetHeight)/2  
var left = (document.body.clientWidth-div.offsetWidth)/2  
function change()  
\{   
   div.style.left=(document.body.clientWidth-div.offsetWidth)/2  
   div.style.top =(document.body.clientHeight-div.offsetHeight)/2+document.body.scrollTop  
   top = (document.body.clientHeight-div.offsetHeight)/2  
   left = (document.body.clientWidth-div.offsetWidth)/2  
\}  
change()  
window.οnresize=change  
window.οnscrοll=function()\{div.style.top=top+document.body.scrollTop\}  
</script>

这么写在ie6下有点问题 梁超指点了一下  onresize在ie6下有bug  可以用div的onresize代替body的

把div放在body外面  就不会影响页面的效果了。  果然是好办法。。

<div id="box" style="width:100%"><div>test</div></div>  
<body><div id="ss" style="height:200px; width:200px; background-color:\#FF0000; position:absolute"></div>  
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></body>  
<script>  
var isIE = (document.all) ? true : false  
var div  = document.getElementById("ss")  
var top  = (document.body.clientHeight-div.offsetHeight)/2  
var left = (document.body.clientWidth-div.offsetWidth)/2  
function change()  
\{   
   div.style.left=(document.body.clientWidth-div.offsetWidth)/2  
   div.style.top =(document.body.clientHeight-div.offsetHeight)/2+document.body.scrollTop  
   top = (document.body.clientHeight-div.offsetHeight)/2  
   left = (document.body.clientWidth-div.offsetWidth)/2  
\}  
change()  
var oContainer = document.getElementById("box");  
if(isIE)\{  
    oContainer.οnresize=change  
\}else\{  
    window.οnresize=change  
\}

window.οnscrοll=function()\{div.style.top=top+document.body.scrollTop\}  
</script>

3。滚动条一直居底

<body>  
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
</body>  
<script>  
window.onload = function()\{  
document.body.scrollTop=document.body.scrollHeight - document.body.clientHeight\}  
window.οnresize=function()\{  
document.body.scrollTop=document.body.scrollHeight - document.body.clientHeight\}  
window.οnscrοll=function()\{  
document.body.scrollTop=document.body.scrollHeight - document.body.clientHeight\}  
</script>