JavaScript获取窗口属性的个人笔记

属性的个人笔记"/>

JavaScript获取窗口属性的个人笔记

窗口属性

• • 上期题目解答
  • 一、滚动条
  • • 1.滚动条滚动距离
    • 2.查看视口的尺寸
  • 二、元素尺寸
  • • 1.查看元素的几何尺寸
    • 2.查看元素的尺寸位置
  • 三、滚动条滚动
  • • 1.window上有三个方法

上期题目解答

1.封装函数insertAfter()；功能类似insertBefore()，即将目标元素放在指定元素后面。

Element.prototype.insetAfter = function(targetNode,afterNode){//原型上封装，节点都能够调用var dressNode = afterNode.nextElementSibling;//找到afterNode的后面的一个元素节点if(dressNode == null){//如果后面一个不存在，说明已经是最后一个元素节点了this.appendChild(targetNode);//就直接appendChild，放在末尾}else{this.insertBefore(targetNode,dressNode);//存在，放在afterNode下一个兄弟元素节点的前面，就是放在afterNode的后面}
}

一、滚动条

1.滚动条滚动距离

window.pageXOffset/pageYOffset：设置或返回当前页面相对于窗口显示区左上角的 X/Y 位置。
以下我没有进行左右滚动，所以pageXOffset为0

由于以上方法IE8及IE8以下不兼容，它提供以下方法
document.body/documentElement.scrollLeft/scrollTop：但是兼容性比较混乱，使用时取两个值相加，因为不可能存在两个同时有值。(这里电脑不好演示IE的方法)
通过封装一个兼容性方法来让我们快速理解

function getScrollOffset(){//获取滚动条滚动距离（设置同理）if(window.pageXOffset){return {//现在的多数浏览器x : window.pageXOffset,y : window.pageYOffset}}else{return {//ie8及以下的兼容问题x : documnet.body.scrollLeft + document.documentElement.scrollLeft,y : documnet.body.scrolTop + document.documentElement.scrollTop//前面提到的，兼容性比较混乱，使用时取两者相加}}
}

2.查看视口的尺寸

window.innerWidth/innerHeight ：返回窗口的文档显示区的宽度/高度(加上 滚动条宽度 / 高度)
这里因为控制台站位，且左右没有滚动天，所以显示可视区左右宽度，而高度因为是加上滚动条的，一般情况就是页面可视高。IE8及IE8以下不兼容

document.documentElement.clientWidth/clientHeight：标准模式下，任意浏览器都兼容的视口的尺寸（不加 滚动条宽度 / 高度）

document.body.clientWidth/clientHeight：适用于怪异模式下的浏览器
如果使用方法documentpatMode返回"BackCompat"即为怪异模式
这里简单介绍下怪异模式：
在标准模式页面按照HTML,CSS的定义渲染，而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计，并未严格遵循W3C标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式，如果存在一个完整的DOCTYPE则浏览器将会采用标准模式，如果缺失就会采用怪异模式。
两者两个常见区别：盒模型的处理差异，行内元素的垂直对齐。
这里本人也只是简单了解，如果有读者想认真了解，这里有一篇《简书》供借阅。
链接: 浏览器的标准模式与怪异模式.
这里通过封装一个兼容性方法，返回浏览器视口尺寸，让读者能够快速掌握

function getViewportOffset(){if(window.pageXOffset){return {x : window.innerWidth,y : window.innerHight}}else{//IE8及以下if(documentpatMode === "BackCompat"){//怪异模式下return {x : document.body.clientWidth,y : document.body.clientHeight}}else{return {//标准模式下x : document.documentElement.clientWidth,y : document.documentElement.clientHeight}}}
}

二、元素尺寸

1.查看元素的几何尺寸

domEle.getBoundingClientRect()：该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标。（兼容性比较好，但是height和width属性老版本IE并未实现）

返回的结果并不是“实时的”,这里的实时性前面已经讲过，即后面再更改时该方法的结果不会跟着改变。

2.查看元素的尺寸位置

dom.offsetWidth / offsetHeight：查看元素的尺寸
dom.offsetLeft / offsetTop：查看元素的位置
dom.offsetParent：返回最近的有定位的父级，如无，返回body, body.offsetParent 返回null


对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。(无论是 left 还是margin-left等都是距离。)

三、滚动条滚动

1.window上有三个方法

scroll / scrollTo / scrollBy(x,y) 用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。
区别：scrollBy()会在之前的数据基础之上做累加。
这里通过一个常见的小说自动翻页功能来让大家快速掌握

var key = true;//设置一把锁
var timer = 0;//定时器外部保存
var start = document.getElementsByClassName("start")[0];//选中自动翻页的开关
var stop = document.getElementsByClassName("stop")[0];
tart.onclick = function(){if(key){timer = setInterval(function(){window.scrollBy(0,5);},100);//每100毫秒往下滚动5key = false;这是关锁，防止多次点击，生成多个执行队列}
};
stop.onclick = function(){clearInterval(timer);key = true;//关闭后开锁，下次可以在启动
};

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！