《Web前端基礎(chǔ)》課件-任務(wù)7：學(xué)習(xí)DOM模型 元素其他操作

元素其他操作1獲取元素的位置和大小通過元素的offset系列屬性可以獲取元素的位置、大小等，offset的含義是偏移量。屬性說明offsetParent向上層查找最近的設(shè)置定位的父元素，或最近的table、td、th、body元素，返回找到的元素offsetLeft獲取元素相對(duì)其offsetParent元素左邊界的偏移量offsetTop獲取元素相對(duì)其offsetParent元素上邊界的偏移量offsetWidth獲取元素（包括padding、border和內(nèi)容區(qū)域）寬度offsetHeight獲取元素（包括padding、border和內(nèi)容區(qū)域）高度1獲取元素的位置和大小使用offset系列屬性時(shí)的注意事項(xiàng)如下。offset系列屬性都是只讀的，獲取結(jié)果為數(shù)字型像素值。定位是指元素的樣式中設(shè)置了position定位。offsetParent在查找父元素時(shí)，如果父元素沒有設(shè)置定位，則繼續(xù)向上層查找祖先元素。在Chrome瀏覽器中，如果一個(gè)元素被隱藏（display為none），或其祖先元素被隱藏，或元素的position被設(shè)為fixed，則offsetParent屬性返回null。通過client系列屬性可以獲取元素的可視區(qū)域。屬性說明clientLeft獲取元素左邊框的大小clientTop獲取元素上邊框的大小clientWidth獲取元素的寬度，包括padding，不包括border、margin和垂直滾動(dòng)條clientHeight獲取元素的高度，包括padding，不包括border、margin和水平滾動(dòng)條2獲取元素的可視區(qū)域使用client系列屬性時(shí)的注意事項(xiàng)如下。client系列屬性都是只讀的，獲取結(jié)果為數(shù)字型像素值。當(dāng)內(nèi)容區(qū)域超出容器大小時(shí)，clientWidth和clientHeight屬性仍然按照CSS中設(shè)置的寬度、高度和padding來計(jì)算。2獲取元素的可視區(qū)域通過scroll系列屬性可以實(shí)現(xiàn)元素的滾動(dòng)操作。屬性說明scrollLeft獲取或設(shè)置元素被“卷去”的左側(cè)距離scrollTop獲取或設(shè)置元素被“卷去”的上方距離scrollWidth獲取元素內(nèi)容的完整寬度，不含邊框scrollHeight獲取元素內(nèi)容的完整高度，不含邊框3元素的滾動(dòng)操作使用scroll系列屬性時(shí)的注意事項(xiàng)如下。scroll系列屬性的獲取結(jié)果為數(shù)字型像素值。scrollWidth和scrollHeight屬性是只讀屬性，不能修改。scrollLeft和scrollTop屬性允許修改。3元素的滾動(dòng)操作當(dāng)鼠標(biāo)事件觸發(fā)后，若要獲取鼠標(biāo)的位置信息，可以通過事件對(duì)象中的鼠標(biāo)位置屬性獲取。屬性說明clientX鼠標(biāo)指針位于瀏覽器窗口中頁面可視區(qū)的水平坐標(biāo)clientY鼠標(biāo)指針位于瀏覽器窗口中頁面可視區(qū)的垂直坐標(biāo)pageX鼠標(biāo)指針位于文檔的水平坐標(biāo)，早期版本IE瀏覽器不支持pageY鼠標(biāo)指針位于文檔的垂直坐標(biāo)，早期版本IE瀏覽器不支持screenX鼠標(biāo)指針位于屏幕的水平坐標(biāo)screenY鼠標(biāo)指針位于屏幕的垂直坐標(biāo)4獲取鼠標(biāo)指針位置使用鼠標(biāo)位置屬性時(shí)的注意事項(xiàng)如下。屬性都是只讀的，無法修改。當(dāng)鼠標(biāo)指針放在網(wǎng)頁上并且向下滾動(dòng)頁面時(shí)，clientX、clientY獲取的結(jié)果不會(huì)隨著頁面滾動(dòng)改變，而pageX、pageY會(huì)隨著頁面滾動(dòng)改變，這是因?yàn)閜ageX、pageY獲取的是文檔中的坐標(biāo)。4獲取鼠標(biāo)指針位置早期版本IE瀏覽器不支持pageX和pageY屬性，可以用如下代碼進(jìn)行兼容處理。4獲取鼠標(biāo)指針位置vare=event||window.event;varpageX=e.pageX||e.clientX+document.documentElement.scrollLeft;varpageY=e.pageY||e.clientY+document.documentElement.scrollTop;獲取html根元素案例需求：編寫一個(gè)簡(jiǎn)單的對(duì)話框，實(shí)現(xiàn)鼠標(biāo)拖曳效果。動(dòng)手實(shí)踐：鼠標(biāo)拖曳效果對(duì)話框是通過div元素制作的，該對(duì)話框的標(biāo)題區(qū)域（頂部淺灰色區(qū)域）是允許鼠標(biāo)操作的區(qū)域，按住鼠標(biāo)左鍵可對(duì)整個(gè)對(duì)話框進(jìn)行拖曳。根據(jù)效果圖編寫頁面結(jié)構(gòu)和樣式。為對(duì)話框的標(biāo)題區(qū)域注冊(cè)鼠標(biāo)按下事件和鼠標(biāo)釋放事件。在鼠標(biāo)按下時(shí)注冊(cè)鼠標(biāo)移動(dòng)事件，在鼠標(biāo)釋放時(shí)移除鼠標(biāo)移動(dòng)事件。在鼠標(biāo)按下時(shí)，用鼠標(biāo)指針距離文檔左側(cè)和頂部的距離，分別減去div元素距離文檔左側(cè)和頂部的距離，得到鼠標(biāo)指針在div元素內(nèi)的X、Y坐標(biāo)值。在鼠標(biāo)移動(dòng)事件中更改div元素的left和top值，計(jì)算方式為：使用