javascript定时器+DOM查看视口以及元素尺寸和位置

javascriptjs定时器
setInterval( 函数, 时间);可识别最小帧数14 ,每xx时间执行一次这个函数, 循环执行多次
setTimeout( 函数 , 时间);xx时间之后执行这个函数
clearInterval( );
clearTimeout( );
全局对象window上的方法, 内部函数this指向window
DOM基本操作查看滚动条的滚动距离
window.page

javascript

js定时器

  • setInterval( 函数, 时间);可识别最小帧数14 ,每xx时间执行一次这个函数, 循环执行多次
  • setTimeout( 函数 , 时间);xx时间之后执行这个函数
  • clearInterval( );
  • clearTimeout( );
  • 全局对象window上的方法, 内部函数this指向window

DOM基本操作

查看滚动条的滚动距离

  • window.pageXOffset/ pageYOffset
    • IE8及IE8以下不兼容
  • document.body/ documentElement .scrollLeft/scrollTop
    • 兼容性比较昏乱, 用时取两个值相加, 因为不可能存在两个同时有值
  • 封装兼容方法, 求滚动轮滚动距离getScrollOffset()
1
2
3
4
5
6
7
8
9
10
11
12
13
function getScrollOffset() {
if(window.pageXOffset){
return{
x: window.pageXOffset,
y: window.pageYOffset
}
}else{
return{
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
}

查看视口的尺寸

  • window.innerWidth/innerHeight
    • IE8及IE8以下不兼容
  • document.documentElement.clientWidth/clientHeight
    • 标准模式下, 任意浏览器都兼容
  • document.body.clientWidth/clientHeight
    • 适用于怪异模式下的浏览器
  • 封装方法, 返回浏览器视口尺寸getViewportOffset( )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getViewportOffset() {
if(window.innerWidth && 0){
return{
w: window.innerWidth,
h: window.innerHeight
}
}else if(document.compatMode === "CSS1Compat"){
return{
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}else{
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
}
}

让滚动条滚动

  • window上有三个方法
  • scroll( ), scrollTo( ), scrollBy( );
  • 三个方法功能类似, 用法都是将x, y坐标传入. 即实现让滚动条滚动到当前位置
  • 区别: scrollBy( )会在之前的数据基础上做累加

查看元素的几何尺寸

  • 标签.getBoundingClientRect( );
  • 兼容性很好
  • 该方法返回一个对象, 对象里面有left, top, right, bottom等属性. left和top代表该元素左上角的x和y坐标, right和bottom代表元素右下角的x和y坐标
  • height和width属性老版本IE并未实现
  • 返回的结果并不是”实时的”

查看元素的尺寸

  • dom.offsetWidth, dom.offsetHeight

查看元素的位置

  • dom.offsetLeft, dom.offsetTop
  • 对于无定位父级的元素, 返回相对于文档的坐标. 对于有定位父级的元素, 返回相对于最近的有定位的父级的坐标.
  • dom.offsetParent
  • 返回最近的有定位的父级, 如无, 返回body, body.offsetParent返回null
  • eg: 求元素相对于文档的坐标getElementPosition( )
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!