javascript针对DOM的应用

来源：互联网发布：淘宝客服的上班时间编辑：程序博客网时间：2024/05/18 03:56

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body,div{padding:0px;margin:0px;}
#gd{width:100px;height:100px;background:#F00;color:#FFF;}
</style>
<script>
window.onload = function(){
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop;
var l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft;
if(isIE6){
setInterval(function(){
t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop;
l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft;
document.getElementById("gd").style.position = "absolute"
document.getElementById("gd").style.top = t + "px";
document.getElementById("gd").style.left = l + "px";
},1)
}
else{
document.getElementById("gd").style.position = "fixed"
document.getElementById("gd").style.top = t + "px";
document.getElementById("gd").style.left = l + "px";
}
}
</script>
<title>固定居中</title>
</head>
<body>
<div id="gd">
我就在中间随便你们怎么改变窗口大小和高度
</div>
<div style="height:1200px;">
</div>
</body>
</html>

var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
这两句是判断浏览器。这是Aajx里的方法。也很好理解。我在这里就不多说了。大家有兴趣的可以去网上找找了解一下判断各种浏览器。

var t= (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop;
var l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft;
这两句是重点。我要仔细说下：
document.documentElement.clientHeight这个是获取当前浏览器窗口的高度。
document.getElementById("gd").offsetHeight这是获取我们dom元素的实际高度。
document.documentElement.scrollTop这是获取滚动条滚动的高度。

document.documentElement.clientHeight/2整个浏览器高度的一半减去document.getElementById("gd").offsetHeight/2

我们dom元素高度的一半。就是我们这个DOM元素要居中所需要距离当前浏览器顶部的top距离。但是这只是个死的高度。

因为浏览器的内容不可能正好就是小于等于浏览器当前窗口的高度。内容特别高的时候会出现滚动条。好在我们有document.documentElement.scrollTop也就是我们滚动条滚动的高度。

把他加上就是即时dom元素需要居中时候距离当前浏览器顶部的top距离，当然下面那句的算法和这个是一样的，我就不多说了，

也让大家自己理解一下，这样印象会深刻一点。

不知道我这样说大家理解没有。这个应该用个图文说明的。不过我觉得我说的应该挺清楚了。大家如果还有点模糊。在纸上画画也就能明白了。

这个距离清楚了的话。现在我们只需要做最后一件事了。就是让滚动条滚动的时候。即时的把这个滚动的高度给加进去。

然后把即时的这个t和l值设置到dom的top和left属性中去。这样就能给用户造成个假象。以为这个是固定在那里的。

if(isIE6){
            setInterval(function(){
                     t = (document.documentElement.clientHeight - document.getElementById("gd").offsetHeight)/2 + document.documentElement.scrollTop;
                     l = (document.documentElement.clientWidth - document.getElementById("gd").offsetWidth)/2 + document.documentElement.scrollLeft;
                     document.getElementById("gd").style.position = "absolute"
                     document.getElementById("gd").style.top = t + "px";
                     document.getElementById("gd").style.left = l + "px";
                     },1)

这段就是这个作用。if(isIE6)就是当isIE6这个为真时。也就是当是IE6的浏览器的时候。setInterval(...,1)

这个是设置个时钟让在IE6的浏览器下每隔1微秒执行一下语句。也就是不断的在更新t和l的值。

然后不断的付给DOM元素的top和left属性，1微秒非常快。用户拉滚动条的速度不可能只需要1微秒的时间

。所以用户也就不可能看出来什么。以为那个就是固定在那里的。当然你也可以设置一个滚动事件windon.onscroll。也可以。

但是我觉得没这种好。大家有兴趣的也可以研究一下（大家别闲我啰嗦，我觉得自己多研究一下东西，比我教大家一大堆东西都有用）。

当然如果不是IE6的浏览器都支持fixed属性。就执行这些语句了。
document.getElementById("gd").style.position = "fixed"//给dom元素加一个fixed属性
document.getElementById("gd").style.top = t + "px";//初始化时给dom元素设置一个居中的t值。
document.getElementById("gd").style.left = l + "px";//初始化时给dom元素设置一个居中的l值

好了。这篇就到这里了。这里只是居中。还有什么固定底部拉，固定居左拉等等。道理都是一样的。只是计算top和left不一样而已。大家没事可以自己研究一下。还有setInterval和setTimeout这两个方法

0 0