<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏碰壁反d</title>
<style>
{
padding: 0px;
margin: 0px;
}
body{
background: black;
}
div{
width: 100px;
height: 100px;
border-radius: 100px;
background: blue;
position: fixed;
}
</style>
<script>
windowonload=function(){
var oBall=documentgetElementById("ball");
var X=documentdocumentElementclientWidth;
var Y=documentdocumentElementclientHeight;
var tops=0;
var lefts=0;
var flagX=true;
var flagY=true;
var timer;
clearInterval(timer);
timer=setInterval(move,1);
windowonresize=function(){
var X=documentdocumentElementclientWidth;
var Y=documentdocumentElementclientHeight;
clearInterval(timer);
timer=setInterval(move,1);
}
function move(){
if(flagX){
lefts--;
oBallstyleleft=lefts+"px";
if(lefts<0){
flagX=false;
}
}else{
lefts++;
oBallstyleleft=lefts+"px";
if(lefts>=X-oBalloffsetWidth){
flagX=true;
}
}
if(flagY){
tops--;
oBallstyletop=tops+"px";
if(tops<=0){
flagY=false;
}
}else{
tops++;
oBallstyletop=tops+"px";
if(tops>=Y-oBalloffsetHeight){
flagY=true;
}
}
}
}
</script>
</head>
<body>
<div id="ball"></div>
</body>
</html>
offset函数是以指定的应用为参考系，通过上下左右偏移得到新的区域的引用。返回的引用可以是一个单元格也可以是一个区域。并且可以引用指定行列数的区域。
2
它的语法形式是 OFFSET(reference,rows,cols,height,width)，下面就以一个实例应用做解释 。以A1单元格作为参考系，向下移动2行，向右移动2列，我们可以直接找到引用的单元格是 C3，结果是6。
3
在D3单元格输入公式=OFFSET(A1,2,2,1,1)，其中A1是参考系，接着的2,2分别表示下，右移动的行数和列数，同样向上，左则是负数。最后面的1,1表示引用的区域大小是一行一列，也就是一个单元格。
4
结果和我们肉眼看到的一样，函数公式中最后面的1,1可以省略，如下图，其就表示直接引用一个单元格。
精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
eventclientX 相对文档的水平座标
eventclientY 相对文档的垂直座标
eventoffsetX 相对容器的水平坐标
eventoffsetY 相对容器的垂直坐标
documentdocumentElementscrollTop 垂直方向滚动的值
eventclientX+documentdocumentElementscrollTop 相对文档的水平座标+垂直方向滚动的量
实现代码
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"
">
function getWH(){
var wh = {};
"Height Width"replace(/[^\s]+/g,function(a){
var b = atoLowerCase();
wh[b]=window["inner"concat(a)]||
documentcompatMode ==="CSS1Compat" && documentdocumentElement["client"concat(a)]
|| documentbody["client"concat(a)];
});
return wh;
}
了解两个名词：BackCompat 标准兼容模式关闭（怪异模式）
CSS1Compat 标准兼容模式开启
这个方法为获取页面可视区域的高度，普通情况下，windowinnerHeight 即可获取，如果是正常模式，并且有clientHeight的情况下， documentdocumentElementclientHeight 获取的就是可视区域高度。在怪异模式下，是使用documentbody获取。
function getBodyWH(){
var wh = {};
"Height Width"replace(/[^\s]+/g,function(a){
var b = atoLowerCase();
wh[b]=documentcompatMode ==="CSS1Compat" && documentdocumentElement["scroll"concat(a)]
|| documentbody["scroll"concat(a)];
});
return wh;
}
这个为获取页面的高度，用于iframe的自适应时候获取。
var ss = {};
ssscrollTopFn = function(arg){
var a = navigatoruserAgenttoLowerCase()indexof("webkit");//判断webkit内核
var scrollTop;
if(a>-1||documentcompatMode =="BackCompat"){
thisscrollTopFn =function(arg){
if(typeof arg == 'number'){
documentbodyscrollTop = arg;
}else{
return documentbodyscrollTop;
}
}
}else{
thisscrollTopFn =function(arg){
if(typeof arg == 'number'){
documentdocumentElementscrollTop = arg;
}else{
return documentdocumentElementscrollTop;
}
}
}
return thisscrollTopFnapply(this,arguments);
}
<div id="dd" style="margin: auto; width: 500px;">abcd</div>
<script type="text/javascript">
alert(documentgetElementById("dd")offsetHeight);
</script>
IE Firefox测试结果均为18
网页可见区域宽： documentbodyclientWidth
网页可见区域高： documentbodyclientHeight
网页可见区域宽： documentbodyoffsetWidth (包括边线的宽)
网页可见区域高： documentbodyoffsetHeight (包括边线的高)
网页正文全文宽： documentbodyscrollWidth
网页正文全文高： documentbodyscrollHeight
网页被卷去的高： documentbodyscrollTop
网页被卷去的左： documentbodyscrollLeft
网页正文部分上： windowscreenTop
网页正文部分左： windowscreenLeft
屏幕分辨率的高： windowscreenheight
屏幕分辨率的宽： windowscreenwidth
屏幕可用工作区高度： windowscreenavailHeight
屏幕可用工作区宽度： windowscreenavailWidth
` font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif,Droid Sans Fallback;
<meta name="viewport" content="width=device-width, initial-scale=10, maximum-scale=10, user-scalable=0">
<body onselectstart="return false">
white-space: pre-wrap;
-webkit-tap-highlight-color: transparent;
注意到“pre-wrap”属性值：保留空白符序列，但是正常地进行换行。
white-space:pre-wrap;
filter: brightness(100); 变白
第二行变第一行不变
body{}
小程序上fixed成功过
一般这种都让ios或者安卓端禁止掉，然后在有d性需求的页面添加样式
overflow-y: scroll;
-webkit-overflow-scrolling : touch;
即可
-webkit-overflow-scrolling: touch;
//小程序 h5 交互
touches: 当前屏幕上所有触摸点的列表;
targetTouches: 当前对象上所有触摸点的列表;
changedTouches: 涉及当前(引发)事件的触摸点的列表
通过一个例子来区分一下触摸事件中的这三个属性：
1 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。
2 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，
为第二个手指的触摸点，因为第二个手指是引发事件的原因
3 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值
4 手指滑动时，三个值都会发生变化
5 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。
6 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，
此值为最后一个离开屏幕的手指的接触点。
3touchmove事件对象的获取
想要在touchmove:function(e,参数一)加一个参数，结果直接使用epreventDefault()就会 e 报错，处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一){
var e=arguments[0]
epreventDefault()
}
webpack-config dev-server 添加 disableHostCheck: true,
html的font-size还没设置的时候展示的样式是错误的
关于获取各种浏览器可见窗口大小的一点点研究
经本地测试和研究再次对 documentdocumentElementclientWidth 进行解释：
每一个html文件在浏览器中都会被解析为一个页面，documentdocumentElementclientWidth则是获取本页面的宽度。
下面进行举例子说明：
1） 如果在浏览器全屏，并且打开的一个标签页中只包含一个页面，则documentdocumentElementclientWidth即本页面的宽度=浏览器的宽度=屏幕可用工作区宽度：即windowscreenavailWidth;
2）当调整浏览器为非全屏状态时并且打开的一个标签页中只包含一个页面：则documentdocumentElementclientWidth即本页面的宽度=浏览器的宽度！=屏幕可用工作区宽度：即windowscreenavailWidth;
3）当打开的一个标签页中不只包含一个页面：比如在一个页面的frame中包含一个ifrme,该iframe指向另一个页面，如下所示
则iframe指向页面的documentdocumentElementclientWidth不再等于浏览器宽度，而是等于ifame的宽度
windowdocumentbodyclientHeight就可以
windowscreenavailWidth 返回当前屏幕宽度(空白空间)
windowscreenavailHeight 返回当前屏幕高度(空白空间)
windowscreenwidth 返回当前屏幕宽度(分辨率值)
windowscreenheight 返回当前屏幕高度(分辨率值)
windowdocumentbodyoffsetHeight; 返回当前网页高度
windowdocumentbodyoffsetWidth; 返回当前网页宽度
我们这里说说四种浏览器对 documentbody 的 clientHeight、offsetHeight 和 scrollHeight 的解释。
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
=======================================================================
clientHeight与offsetHeight的区别
许多文章已经介绍了clientHeight和offsetHeight的区别，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么组成的呢？如何计算这两个数的值？
1 clientHeight和offsetHeight的值由什么决定？
假如我们有以下的DIV，主要显示的文字为"This is the main body of DIV"。
如上图所示，clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，而offsetHeight的值由DIV内容的实际高度，CSS中的padding值，scrollbar的高度和DIV的border值决定；至于CSS中的margin值，则不会影响clientHeight和offsetHeight的值。
2 CSS中的Height值对clientHeight和offsetHeight有什么影响？
首先，我们看一下CSS中Height定义的是什么的高度。如在本文最后部分“APPENDIX示例代码”（注：以下称为“示例代码”）中，innerDIVClass的Height值设定为50px，在IE下计算出来的值如下所示。也就是说，在IE里面，CSS中的Height值定义了DIV包括padding在内的高度（即offsetHeight的值）；在Firefox里面，CSS中的Height值只定义的DIV实际内容的高度，padding并没有包括在这个值里面(70 = 50 + 10 2)。
in IE:
innerDivclientHeight: 46
innerDivoffsetHeight: 50
outerDivclientHeight: 0
outerDivoffsetHeight: 264
in Firfox:
innerDivclientHeight: 70
innerDivoffsetHeight: 74
outerDivclientHeight: 348
outerDivoffsetHeight: 362
在上面的示例中，也许你会很奇怪，为什么在IE里面outerDivclientHeight的值为0。那是因为示例代码中，没有定义outerDIVClass的Height值，这时，在IE里面，则clientHeight的值是无法计算的。同样，在示例代码中，如果将innerDIVClass中的Height值去年，则innerDIVclientHeight的值也为0。(注：在Firefox下不存在这种情况)。
如果CSS中Height值小于DIV要显示内容的高度的时候呢（当CSS中没有定义overflow的行为时）？在IE里面，整个clientHeight（或者offsetHeight）的值并没有影响，DIV会自动被撑大；而在Firefox里面，DIV是不会被撑开的。如在示例代码中，将innerDivClass的Height值设为0，则计算结果如下所示。IE里面的DIV被撑开，其clientHeight值等于内容的高度与padding2的和；而Firefox里面，文字将溢出DIV的边界，其clientHeight值正好是padding值的两倍。
In IE:
innerDivclientHeight: 38
innerDivoffsetHeight: 42
outerDivclientHeight: 0
outerDivoffsetHeight: 256
In Firefox:
innerDivclientHeight: 20
innerDivoffsetHeight: 24
outerDivclientHeight: 298
outerDivoffsetHeight: 312
以上就是关于JS中offsetheight获取的是元素的什么属性有具体的实例吗全部的内容，包括:JS中offsetheight获取的是元素的什么属性有具体的实例吗、excel的offset函数报错、js怎么取得文本框的宽度与高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）