定时器元素大小位置属性等 20181231

Posted 2021-01-31 freesfu

定时器

setInterval(fn, delay)

该函数设置在设置每隔一定时间(delay以毫秒为单位)执行一次fn函数，同时返回一个代表这个重复执行的唯一辨识符intervalID，clearInterval()可以通过intervalID清除对应的重复操作

setTimeout(fn, delay)

推迟一段时间(delay以毫秒为单位)，然后执行fn(只执行一次)，同时也会返回一个timeoutID，可以被clearTime()在执行前清除。

元素大小位置

滚动条(属性)

• window.pageXoffset
• window.pageYoffset

分别表示滚动条的垂直滚动距离和水平滚动距离(距离top/left的距离)，以像素为单位

IE8和IE8一下没有以上的两个属性，使用以下两个属性，并且以下两个属性时不规则交替存在。。。。幸好，其中一个存在时，另外一个值为零

• document.body.scrollLeft/Top
• document.documentElement.scrollLeft/Top

可视区窗口(属性)

• window.innerWidth
• window.innerHeight

返回值为可视窗口的大小(能显示网页的部分，不包括菜单栏和滚动条)，不是网页大小(BOM属性)

浏览器的两种渲染模式

标准模式和怪异(混杂)模式，为了兼容老旧浏览器而存在的两种模式

表示元素可视区域大小的属性(包含padding，但是不包括border和margin)

• Element.clientWidth/Height

写一个getViewportOffset()返回浏览器窗口尺寸，要求兼容IE浏览器

元素位置

• Element.getBoundingClientRect() 返回的是静态的快照位置和尺寸(DOMRect)
• Element.offsetWidth/offsetHeight 属性值为该元素的布局大小，包括margin border padding。
• Element.offsetLeft/offsetTop 属性值为与Element.offsetParent的距离
• Element.offsetParent 值为距离该元素最近的一个定位的父级元素

滚动条滚动

• window.scroll(x, y)

• window.scrollTo(x, y)
  使滚动条滚动到该绝对位置

• window.scrollBy(x, y) 是滚动条滚动一个相对的距离