js：網頁中的高和寬（document）
阿新 • • 發佈：2017-12-21
冒泡 Language ntop int border dom html tee play
一，此例中通過鼠標點擊事件在網頁的中心位置創建一個盒子，不管瀏覽器變小，或是有卷曲的網頁，盒子都會在瀏覽器正中央
主要方法：clientWidth方法獲取當前可見網頁的寬度
document. documentElement.clientWidth;
獲得網頁中被卷去的寬高
document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
例：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } </style> <script language="JavaScript"> function $(oId){ return document.getElementById(oId); } function which(){//clientWidth方法獲取當前可見網頁的寬度 var w=document. documentElement.clientWidth; var h=document. documentElement.clientHeight; //獲得網頁中被卷去的寬高 var sw=document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft; var sl=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;//運算得到設置盒子的位置 var hh=w/2+sw; var ss=h/2+sl; //創建一個盒子並為其設置屬性 var oDiv=document.createElement("div"); oDiv.style.width="100px"; oDiv.style.height="100px"; oDiv.style.display="block"; oDiv.style.position="absolute"; oDiv.style.left=hh+"px"; oDiv.style.top=ss+"px"; // oDiv.style.marginLeft=hh+"px"; // oDiv.style.marginTop=ss+"px"; oDiv.style.backgroundColor="black"; //設置盒子位置 $("container").appendChild(oDiv); } </script> </head> <body> <div id="container" style="height: 2000px;width: 2000px" onmousedown="which();"> </div> </body> </html>
二，addEventListener添加事件句柄
為網頁添加一個盒子可跟隨網頁的向下滑動保持在網頁旁邊
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/User3.js"></script> <style type="text/css"> body{ width: 2000px; height: 2000px; } .box{ width: 150px; height: 200px; position: absolute; right: 20px; border: 1px solid red; } .aff{ transition:all 1s; } </style> <script language="JavaScript"> /* obj.addEventListener(xEvent,fn, true) 事件冒泡 例: 當有父子關系的元素，都觸發單擊事件的時候，會形成事件流，事件流中的 事件會依順序逐個觸發。 addEventListener第三個參數說明 第三個參數是指事件的冒泡觸發順序，false 表示從子元素到父元素依次觸發事件。 true 表示從父元素到子元素依次觸發事件。 * */ function $(oId){ return document.getElementById(oId); } function scrollEvent(obj,xEvent, fn) { if(obj.attachEvent){ //添加事件句柄fn是傳入的事件類型 obj.attachEvent("on"+xEvent,fn); } if(obj.addEventListener){ //添加事件句柄fn是傳入的事件類型 obj.addEventListener(xEvent,fn, true);//addEventListener w3c標準。 } } ////DOMMouseScroll mousewheel window.onload = function(){ dom.addClass( $("oDiv"),"aff"); var top=$("oDiv").style.top; //類型轉換 top=parseInt(top); //調用scrollEvent函數傳入想要設置的對象和事件和事件執行完調用的函數 scrollEvent(document,"scroll",function(){ // var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; var h=scrollTop+top+"px"; $("oDiv").style.top=h; }); } </script> </head> <!--事件冒泡--> <body > <div style="top:40px;" class="box" id="oDiv"> </div> </body> </html>
js：網頁中的高和寬（document）