前端基本功：JS(八):offset家族

offset家族

offset 自己的
目的： js中有一套方便的获取元素尺寸的办法就是offset家族；

1/offsetWidth 和 offsetHeight

得到对象的宽度和高度(自己的，与他人无关)
offsetWidth = width + border + padding

div { width:220px; border-left:2px solid red; padding:10px;}
div.offsetWidth = 220 + 2 + 20
为什么不用 div.style.width 因为东西只能得到行内的数值

2/offsetLeft 和 offsetTop

返回距离上级盒子（最近的带有定位）左边的位置

如果父级都没有定位则以body 为准
这里的父级指的是所上一级 不仅仅指的是父亲还可以是爷爷曾爷爷曾曾爷爷。。。。

offsetLeft 从父级的padding 开始算父亲的border 不算

总结一下：就是子盒子到定位的父盒子边框到边框的距离

3/offsetParent

offsetParent返回该对象的父级（带有定位）不一定是亲的爸爸
前面学过一个返回父亲(亲的) parentNode 有所区别

offsetParent 和 parentNode的区别：

如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

4/offsetTop 和　style.top 的区别

１．最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.top 不可以只有定位的盒子才有 left top right
２．offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
３．offsetTop 只读，而 style.top 可读写。
４．如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
５．最重要的区别 style.left 只能得到行内样式 offsetLeft 随便

案例：筋斗云

筋斗云.gif




    
    
    



    
    
        首页新闻
        师资力量
        活动策划
        企业文化
        招聘信息
        公司简介
        上海校区
        广州校区

事件对象

我们学过一些事件 : onmouseover onmouseout onclick .....

btn.onclick = function(event) { 语句 }

event 单词翻译过来事件的意思
event 就是事件的对象指向的是事件是 onclick

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。

比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。
普通浏览器支持 event
ie 678 支持 window.event

所以我们采取兼容性的写法：

var event = event || window.event;

1/event 常见属性

2/pageX clientX screenX 区别

screen X 和 screenY

是以我们的电脑屏幕 为基准点测量

pageX 和 pageY

以我们的文档（绝对定位）的基准点对齐
ie678 不认识

clientX clientY

以 可视区域 为基准点类似于固定定位

点击跟随鼠标

点击跟随鼠标.gif

常用事件

onmouseover onmouseout onclick
onmousemove 当鼠标移动的时候就是说，鼠标移动一像素就会执行的事件
div.onmousemove = function() { 语句 }
当鼠标再div 身上移动的时候，就会执行。

得到在某个盒子内的坐标：

得到盒子内的坐标案例

盒子内坐标.gif

div.onmouseover 和 div.onmousemove 区别

他们相同点都是经过 div 才会触发
div.onmouseover 只触发一次
div.onmousemove 每移动一像素，就会触发一次

onmouseup 当鼠标弹起
onmousedown 当鼠标按下的时候

案例：放大镜

放大镜效果.gif

拖动水平条

1.拖动原理 == 鼠标按下接着移动鼠标。
bar.onmousedown = function(){
document.onmousemove = function(){
}
}
2.当我们按下鼠标的时候，就要记录当前鼠标的位置 - 大盒子的位置
算出 bar 当前在大盒子内的距离。

1/防止选择拖动

我们知道按下鼠标然后拖拽可以选择文字的。
清除选中的内容

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

案例：拖动水平条

拖动水平条.gif

今日重点：

offset 自己的偏移
offsetWidth 得到自己的宽度
offsetHeight
构成： width + padding + border
div width 200 border 3px padding-right: 15px
div offsetWidth = 200 + 6 + 15 = 221
◆ offsetLeft 和 offsetTop
div.offsetLeft
得到距离这个 div 最近的带有定位的父盒子左边距离
◆ offsetParent 返回自己的父亲元素（带有定位的）
parentNode 这个返回亲父亲不管父亲是否带有定位
◆ style.top 和 offsetTop
offsetTop 只读只可以得到结果但是不能赋值
style.top 能得到（行内式）但是可以给值
style.top 得到的是 25px
offsetTop 得到的是 25
◆ 事件对象 event
div.onclick = function(event) { } event 是点击的事件对象
event 集合点击事件的相关信息
pageX 文档的参考点
clientX 可视区域
ScreenX 屏幕
◆ 常用事件
onmouseover 经过
onmouseout 离开
onmousemove 鼠标移动
var num = 0;
div.onmouseover = function() { num++; console.log(num))} 1
div.onmousemove = function() { num++; console.log(num))}
onmousedown 按下鼠标
onmouseup 弹起鼠标
拖拽：先按下鼠标然后移动鼠标
bar.onmousedown = funtion() {
document.onmousemove = function() {}
}
最大 window 对象 document对象

  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); ie

今日案例：筋斗云、点击跟随鼠标、放大镜案例素材获取
链接：http://pan.baidu.com/s/1jINmiOI 密码：homu