JavaScript application analysis for DOM (5)_DOM

In fact, this should not be included in the scope of JS tutorials. It should be FF. IE6 and above browsers support the fixed attribute. Only IE6 does not support it. So I went for the damn IE6. I'll give you a tutorial here. Moreover, this effect can also exercise students' computing skills. Many of the effects in the future will require your computing power. Haha
Fixed to center. Or the thoughts are almost the same wherever they are fixed. As long as you want the algorithm to be clear. The effect is a breeze to write. Post the code first

<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> <title> </title>Fixed center <div id="gd"> </div> I'll just let you change the window size and height in the middle. <div style="height:1200px;"> </div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

var isIE=!!window .ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
These two sentences are used to determine the browser. This is the method in Aajx. It’s also easy to understand. I won’t say much more here. If you are interested, you can search online to learn about various browsers.

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;
These two sentences are the key points. I want to say it carefully:
document.documentElement.clientHeight is to get the height of the current browser window.
document.getElementById("gd").offsetHeight This is to get the actual height of our dom element.
document.documentElement.scrollTop This is to get the height of the scroll bar.

document.documentElement.clientHeight/2 is half the height of the entire browser minus document.getElementById("gd").offsetHeight/2 is half the height of our dom element. It is the top distance from the top of the current browser that our DOM element needs to be centered. But this is just a dead end. Because the content of the browser cannot be exactly less than or equal to the height of the browser's current window. Scroll bars will appear when the content is particularly high. Fortunately, we have document.documentElement.scrollTop, which is the height of our scroll bar. Adding it is the top distance from the top of the current browser when the real-time DOM element needs to be centered. Of course, the algorithm in the following sentence is the same as this one. I won’t go into more details and let everyone understand it. This will make a deep impression. a little.

I don’t know if you understand what I said. This should be explained with pictures and text. But I think what I said should be quite clear. If you are still a little confused. You can understand it by just drawing on paper.
If the distance is clear. Now we just have to do one last thing. That's when the scroll bar scrolls. The scroll height is added in real time. Then set the immediate t and l values ​​to the top and left attributes of the dom. This can create a false impression for users. Thought this was fixed there.

Copy code

The code is as follows:

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)

<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>
This paragraph is for this purpose. if(isIE6) is when isIE6 is true. That is, when it is an IE6 browser. setInterval(...,1) sets a clock to execute the statement every 1 microsecond in the IE6 browser. That is, the values ​​​​of t and l are constantly updated. Then it continuously pays the top and left attributes of the DOM element, 1 microsecond is very fast. It is impossible for the user to pull the scroll bar only in 1 microsecond. So it is impossible for users to see anything. I thought it was fixed there. Of course you can also set a scroll event windon.onscroll. That's ok too. But I don’t think it’s that good. If you are interested, you can also research it (please don’t bother me with my verbosity, I think it will be more useful if I research more things by myself than if I teach you a lot of things).

Of course, browsers other than IE6 support the fixed attribute. Just execute these statements.
document.getElementById("gd").style.position = "fixed"//Add a fixed attribute to the dom element
document.getElementById("gd").style.top = t "px";/ /Set a centered t value to the dom element during initialization.
document.getElementById("gd").style.left = l "px";//Set a centered l value to the dom element during initialization

Okay. That’s it for this article. It's just centered here. There are also fixed bottom pulls, fixed left pulls, etc. The principles are the same. It's just that the calculation of top and left is different. If you are fine, you can do your own research. There are also two methods, setInterval and setTimeout. It will be used a lot in future tutorials.