js屬性部分

offset 部分

offset 本身的

目的：js 中有一套方便的獲取元素尺寸的方法就是offset

經常使用：

offsetWidth offsetHeight

獲得對象的寬度和高度（本身的，與他人無關）

offsetWidth = width+border +padding

例如：

div{ width:220px ; border-left:2px solid red; padding: 10px;}

div.offsetWidth=22

0....0+2+20

 

offsetLeft offsetTop

返回距離上級盒子（帶有定位）左邊的位置

若是父級都沒有定位則以body 爲準

這裏的父級指的是全部上一級 不單單所指父類

offsetLeft 從父類的padding 開始算 父類border 不算

總之：子類容器到被定位的符類容器邊框到邊框的距離

 

offsetParent

返回對象父級（帶有定位）

若是當期元素的父級元素沒有進行css 定位（position 爲 absolute 或者 relative）,offsetParent 爲body

反之，若是當期元素的父級元素有ss 定位（position 爲 absolute 或者 relative）,offsetParent取最近的那個父級元素

 

offsetTop 與 style.top 的區別

最大的區別在於 offsetLeft 能夠返回沒有定位盒子的距離左側的位置，而style.top 不能夠

只有定位的容器纔有left top right

 

offsetTop 返回的是數字，而style.top 返回的是字符串，除了數字外還有帶單位：px

 

事件以及對象

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

event :就是事件的意思

event 的常見屬性

var event=event||window.event;//兼容寫法

console.log(event.clientX);

console.log(event.clientY);

 

data	返回拖拽對象的URL字符串（dragDrop）
width	該窗口或框架的高度
height	該窗口或框架的高度
pageX	光標相對於該網頁的水平位置（ie無）
pageY	光標相對於該網頁的垂直位置（ie無）
screenX	光標相對於該屏幕的水平位置
screenY	光標相對於該屏幕的垂直位置
target	該事件被傳送到的對象
type	事件的類型
clientX	光標相對於該網頁的水平位置 （當前可見區域）
clientY	光標相對於該網頁的水平位置

 

pageX clientX screenX 的區別

screenX ,screenY

是以電腦屏幕爲基準點 測量

pageX pageY （ie678 不兼容）

以咱們的文檔（局對定位）的基準點對其

 

clientX cilent Y

以可視區域爲基準點 相似於 相對定位

 

onmouseup 當鼠標彈起

onmousedown 當鼠標按下

 

防止選擇拖動 過界

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