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

offset 自己的

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到信州網(wǎng)站設(shè)計(jì)與信州網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋信州地區(qū)。

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

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

div.offsetWidth = 220 + 2 + 20

為什么不用 div.style.width 因?yàn)闁|西 只能得到行內(nèi)的數(shù)值

如果 父級(jí) 都沒(méi)有定位則以body 為準(zhǔn)

這里的父級(jí)指的是所上一級(jí) 不僅僅指的是 父親 還可以是 爺爺 曾爺爺 曾曾爺爺。。。。

offsetParent返回該對(duì)象的父級(jí) （帶有定位） 不一定是親的爸爸

前面學(xué)過(guò)一個(gè)返回父親(親的) parentNode 有所區(qū)別

如果當(dāng)前元素的父級(jí)元素沒(méi)有進(jìn)行CSS定位（position為absolute或relative），offsetParent為body。

如果當(dāng)前元素的父級(jí)元素中有CSS定位（position為absolute或relative），offsetParent取最近的那個(gè)父級(jí)元素。

1．最大區(qū)別在于 offsetLeft 可以返回沒(méi)有定位盒子的距離左側(cè)的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right

2．offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。

3．offsetTop 只讀，而 style.top 可讀寫(xiě)。

4．如果沒(méi)有給 HTML 元素指定過(guò) top 樣式，則 style.top 返回的是空字符串。

5．最重要的區(qū)別 style.left 只能得到 行內(nèi)樣式 offsetLeft 隨便

我們學(xué)過(guò)一些事件 : onmouseover onmouseout onclick .....

event 單詞翻譯過(guò)來(lái) 事件 的意思

event 就是事件的對(duì)象 指向的是 事件 是 onclick

在觸發(fā)DOM上的某個(gè)事件時(shí)，會(huì)產(chǎn)生一個(gè)事件對(duì)象event，這個(gè)對(duì)象中包含著所有與事件有關(guān)的信息。所有瀏覽器都支持event對(duì)象，但支持的方式不同。

比如鼠標(biāo)操作時(shí)候，會(huì)添加鼠標(biāo)位置的相關(guān)信息到事件對(duì)象中。

普通瀏覽器支持 event

ie 678 支持 window.event

是以我們的 電腦屏幕 為基準(zhǔn)點(diǎn) 測(cè)量

以我們的 文檔 （絕對(duì)定位） 的基準(zhǔn)點(diǎn) 對(duì)齊

ie678 不認(rèn)識(shí)

以 可視區(qū)域 為基準(zhǔn)點(diǎn) 類似于 固定定位

onmouseover onmouseout onclick

onmousemove 當(dāng)鼠標(biāo)移動(dòng)的時(shí)候 就是說(shuō)，鼠標(biāo)移動(dòng)一像素就會(huì)執(zhí)行的事件

div.onmousemove = function() { 語(yǔ)句 }

當(dāng)鼠標(biāo)再div 身上移動(dòng)的時(shí)候，就會(huì)執(zhí)行。

他們相同點(diǎn) 都是 經(jīng)過(guò) div 才會(huì)觸發(fā)

div.onmouseover 只觸發(fā)一次

div.onmousemove 每移動(dòng)一像素，就會(huì)觸發(fā)一次

onmouseup 當(dāng)鼠標(biāo)彈起

onmousedown 當(dāng)鼠標(biāo)按下的時(shí)候

1.拖動(dòng) 原理 == 鼠標(biāo)按下 接著 移動(dòng)鼠標(biāo) 。

bar.onmousedown = function(){

document.onmousemove = function(){

}

}

2.當(dāng)我們按下鼠標(biāo)的時(shí)候，就要記錄當(dāng)前 鼠標(biāo) 的位置 - 大盒子的位置

算出 bar 當(dāng)前 在 大盒子內(nèi)的距離 。

我們知道 按下鼠標(biāo)然后拖拽可以選擇文字 的。

清除選中的內(nèi)容

offset 自己的 偏移

offsetWidth 得到自己的寬度

offsetHeight

構(gòu)成 ： width + padding + border

div width 200 border 3px padding-right: 15px

div offsetWidth = 200 + 6 + 15 = 221

◆ offsetLeft 和 offsetTop

div.offsetLeft

得到距離 這個(gè) div 最近的 帶有定位的 父 盒子 左邊距離

◆ offsetParent 返回自己的父親元素 （帶有定位的）

parentNode 這個(gè)返回親父親 不管父親是否帶有定位

◆ style.top 和 offsetTop

offsetTop 只讀 只可以得到結(jié)果 但是不能賦值

style.top 能得到 （行內(nèi)式 ） 但是可以給值

style.top 得到的是 25px

offsetTop 得到的是 25

◆ 事件對(duì)象 event

div.onclick = function(event) { } event 是點(diǎn)擊的事件對(duì)象

event 集合點(diǎn)擊事件的相關(guān)信息

pageX 文檔的 參考點(diǎn)

clientX 可視區(qū)域

ScreenX 屏幕

◆ 常用事件

onmouseover 經(jīng)過(guò)

onmouseout 離開(kāi)

onmousemove 鼠標(biāo)移動(dòng)

var num = 0;

div.onmouseover = function() { num++; console.log(num))} 1

div.onmousemove = function() { num++; console.log(num))}

onmousedown 按下鼠標(biāo)

onmouseup 彈起鼠標(biāo)

拖拽： 先按下鼠標(biāo) 然后 移動(dòng)鼠標(biāo)

bar.onmousedown = funtion() {

document.onmousemove = function() {}

}

最大 window 對(duì)象 document對(duì)象

今日案例：筋斗云、點(diǎn)擊跟隨鼠標(biāo)、放大鏡案例素材獲取

鏈接：

密碼：homu

金屬(js)王朝是什么?

金屬王朝:時(shí)尚,潮流.愛(ài)音樂(lè),

誕生于2010年1月27日，由中國(guó)MC大嘴和時(shí)尚達(dá)人邱雨晨聯(lián)合創(chuàng)建。

金屬王朝一個(gè)多么優(yōu)雅而又霸氣的家族名。家族代表性符號(hào)：JS王朝〃

相信自己、相信金屬王朝、

相信我們的明天。相信2010的黑馬冠軍屬于≤金屬王朝≥。

我們的審核群號(hào)是：76922229（7*24小時(shí)專人在線審核、無(wú)需等待。）

家族最高統(tǒng)治者：MC大嘴、邱雨晨。

我們現(xiàn)在在當(dāng)今潮流最前線 繼續(xù)開(kāi)辟屬于我們自己的路 打造我們的 打造我們的另類風(fēng)格.

我們是80 90年代的 時(shí)尚潮流家族 我們不安于停止目前的現(xiàn)狀. 我們要玩出自己的個(gè)性來(lái)

我們年輕.時(shí)尚.充滿活力.積極進(jìn)取.我們要在網(wǎng)絡(luò)中樹(shù)立一個(gè)好的形象. 在大家心中崇拜者

2010年2月23號(hào)，家族進(jìn)行了大整頓。

家族已經(jīng)實(shí)施高層內(nèi)招，進(jìn)家族的一律成員，在家族待2個(gè)星期的均可申請(qǐng)應(yīng)聘高層。

家族建立以來(lái)，第一批高層被解除高層職位。

金屬(js)王朝家族未來(lái)的路無(wú)可估量. 我們不模仿任何家族 .完全靠自己的去發(fā)展

關(guān)于javascript和VBSCRIPT，以及java？

VBScript目前主要用在ASP，這是一種后臺(tái)腳本語(yǔ)言，在需要開(kāi)發(fā)具有后臺(tái)功能的網(wǎng)站時(shí)才需用到；而目前幾乎所有瀏覽器都把Javascript定為默認(rèn)的前端腳本語(yǔ)言，甚至可以說(shuō)Javascript是目前唯一的前端腳本語(yǔ)言了，由于它是直接面向用戶的，因此使用范圍更廣，而且Javascript也可以做后臺(tái)腳本用，因此目前學(xué)習(xí)Javascript才是王道。

VBScript也可以做前端腳本，但只有IE內(nèi)核的瀏覽器才支持。如果你真想學(xué)VBScript，你買(mǎi)關(guān)于ASP的書(shū)就行了。另外也可以學(xué)VB、VBS、VBA等等，它們和VBScript是同一家族的，語(yǔ)法基本一樣，一通百通。此外，按鍵精靈也是以VBScript為基礎(chǔ)的。