Web API 笔记06

Web API 笔记06

特 效 常用函数

1 > offset系列

.offsetParent 返回离自己最近的’定位父元素’

.offsetLeft 返回元素相对’定位父元素‘的左侧偏移量，不能赋值，赋值要用style
.offsetTop 返回元素相对’定位父元素‘的顶部偏移量，不能赋值，赋值要用style

.offsetWidth 元素的宽 值 = content + padding + border
.offsetHeigh 元素的高 值 = content + padding + border

2 > client 系列

.clientWidth 元素可视区宽度 值 = content + padding
.clientHeight 元素可视区高度 值 = content + padding

.clientLeft 返回左边框宽度，不常用
.clinetTop 上边框宽度

3 > scroll 系列
.scrollLeft 元素左侧滚动出去的距离
.scrollTop 元素顶部滚动出去的距离
.scrollWidth 元素内容宽度
.scrollHeight 元素内容高度

返回的值均为最终渲染结果

4 > 获取浏览器窗口可视区的宽高
window.innerWidth
window.innerHeight

( ie8 不兼容，改为：
document.documentElement.clientWidth // 或者document.body.clientWidth
document.documentElement.clientHeight // document.body.clientHeight )

window.pageYOffset 获取页面顶部滚动出去的距离
window.pageXOffset 获取页面水平滚动出去的距离

监听滚动事件：
.onscroll = function(){}

鼠标按下事件：
.onmousedown() = function(){}

等效：
‘.onmouseover => .onmouseenter’
‘.onmouseout => .onmouseleave’

鼠标拖拽的实现思路:
鼠标拖拽在mousedown事件中加一个mousemove事件
为了防止鼠标移动太快导致拖拽失效，可以把mousemove和mouseup注册给document