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){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"  οnmοusedοwn="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  mousewheelwindow.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>

转载于:https://www.cnblogs.com/dybe/p/8082229.html

js：网页中的高和宽（document）相关推荐

如何在网页中插入高清晰google卫星地图代码
Google Maps (地图)提供了一项功能,只要简单的一段 HTML 代码即可将 Google Maps 嵌入任意网页中.你只需要登陆 maps.google.com,点击地图右上方的" ...
html中的高和宽背景色怎么写,css background-size与背景图片填满div
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
document.body.offsetWidth 网页可见区域高宽，offset、client、scroll使用方法详解，页面位置距离
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
js获取浏览器高和宽的基本信息：屏幕信息
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
JS控制网页中Flash影片的播放（附带各参数）
实现功能: 在网页中嵌入一段swf视频,加载网页时不播放,点击下面的播放按钮实现播放首先在网页中嵌入Object代码: <object classid="clsid:d27cdb6e ...
【THREE.JS】网页中的炫酷3D
web3d 一.前言粒子特效二维漫画可视化后期处理二.项目使用流程 2.1 项目结构 2.2 基本使用 2.3 项目模板 2.4 技术栈三.基础动画 3.1 THREE.Clock 3.2 ...
移动端获取当前屏幕的高度_css中获取屏幕的宽高
阅读数:26120 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body ...
js中当等于最小值是让代码不执行_网页中JS函数自动执行常用三种方法
本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: 2.在JS语句调用: function myfun ...
three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发
Three.js.ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务.三者的难度对比如下: ThingJS(框 ...

js：网页中的高和宽（document）

js：网页中的高和宽（document）相关推荐

最新文章

热门文章