js：⽹页中的⾼和宽（document）
⼀，此例中通过⿏标点击事件在⽹页的中⼼位置创建⼀个盒⼦，不管浏览器变⼩，或是有卷曲的⽹页，盒⼦都会在浏览器正中央主要⽅法：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){
ElementById(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 ateElement("div");
oDiv.style.width="100px";
oDiv.style.height="100px";
oDiv.style.display="block";
oDiv.style.position="absolute";
oDiv.style.left=hh+"px";
p=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"   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  表⽰从⽗元素到⼦元素依次触发事件。
html document是什么* */
function $(oId){
ElementById(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
dom.addClass( $("oDiv"),"aff");
var  top=$("oDiv").p;
//类型转换
top=parseInt(top);
//调⽤scrollEvent函数传⼊想要设置的对象和事件和事件执⾏完调⽤的函数
scrollEvent(document,"scroll",function(){
//
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
var h=scrollTop+top+"px";
$("oDiv").p=h;
});
}
</script>
</head>
<!--事件冒泡-->
<body >
<div class="box" id="oDiv">
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。