記錄幾個控制位置,座標和obj的長寬的東西........
以前寫過一遍，在新浪的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").onmousemove=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").onmousemove=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.onmousemove=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.onscroll=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.onresize=change
window.onscroll=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.onresize=change
window.onscroll=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.onresize=change
}else{
window.onresize=change
}
window.onscroll=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.onresize=function(){
document.body.scrollTop=document.body.scrollHeight - document.body.clientHeight}
window.onscroll=function(){
document.body.scrollTop=document.body.scrollHeight - document.body.clientHeight}
</script>