js獲取元素的距離父元素、窗口的距離offsetTop,offsetHeight,clientHei

draveness 發(fā)布于2019-08-30 14:25 / 1644人閱讀

摘要：前言相信很多項(xiàng)目中都會(huì)有這樣一個(gè)小需求端，移動(dòng)端則是點(diǎn)擊，鼠標(biāo)移上某個(gè)菜單或者某個(gè)位置，顯示一個(gè)彈出框，移開(kāi)則隱藏彈出框，就是中效果，這種通常做法是每個(gè)子菜單下都有一個(gè)彈框，父元素相對(duì)定位，子元素絕對(duì)定位，只需要控制的彈框的顯示與隱藏即可，

前言

相信很多項(xiàng)目中都會(huì)有這樣一個(gè)小需求（PC端，移動(dòng)端則是點(diǎn)擊），鼠標(biāo)移上某個(gè)菜單或者某個(gè)位置，顯示一個(gè)彈出框，移開(kāi)則隱藏彈出框，就是css中hover效果，這種通常做法是每個(gè)子菜單下都有一個(gè)彈框，父元素相對(duì)定位，子元素絕對(duì)定位，只需要控制的彈框的顯示與隱藏即可，但是，當(dāng)鼠標(biāo)移動(dòng)到邊界的菜單上時(shí)，彈框可能會(huì)超出外部元素的范圍，如下圖：

解決辦法 動(dòng)態(tài)的計(jì)算彈框距離外部元素的位置，即獲取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight，如果彈框的寬度（offsetWidth）+距離左邊的距離（offsetLeft）大于父元素的寬度，則判斷為超出外部元素范圍，需要?jiǎng)討B(tài)改變彈框距離邊框的位置 下面是對(duì)offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop圖解

注意，這里對(duì)彈框的布局有限制，雖然彈框要隱藏，但是不能使用display:none的方式隱藏，可以使用opacity:0或者visibility: hidden隱藏元素，因?yàn)?b>display:none方式不能獲取到元素的高度，寬度等 下面是我寫(xiě)的一個(gè)demo




    
    Title

以上代碼親測(cè)可以解決彈框溢出問(wèn)題，如果道友有更好的解決辦法，歡迎指出，不勝感激?。?！

云服務(wù)器 GPU云服務(wù)器 js找父元素的兄弟獲取父級(jí)元素 js 獲取滾輪距離 js中td之間的距離

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115999.html

相關(guān)文章

js獲取元素的距離父元素、窗口的距離offsetTop,offsetHeight,clientHei

摘要：前言相信很多項(xiàng)目中都會(huì)有這樣一個(gè)小需求端，移動(dòng)端則是點(diǎn)擊，鼠標(biāo)移上某個(gè)菜單或者某個(gè)位置，顯示一個(gè)彈出框，移開(kāi)則隱藏彈出框，就是中效果，這種通常做法是每個(gè)子菜單下都有一個(gè)彈框，父元素相對(duì)定位，子元素絕對(duì)定位，只需要控制的彈框的顯示與隱藏即可，前言相信很多項(xiàng)目中都會(huì)有這樣一個(gè)小需求（PC端，移動(dòng)端則是點(diǎn)擊），鼠標(biāo)移上某個(gè)菜單或者某個(gè)位置，顯示一個(gè)彈出框，移開(kāi)則隱藏彈出框，就是css中h...

張憲坤 2019-08-22 16:11 評(píng)論0 收藏0
js獲取元素的距離父元素、窗口的距離offsetTop,offsetHeight,clientHei

摘要：前言相信很多項(xiàng)目中都會(huì)有這樣一個(gè)小需求端，移動(dòng)端則是點(diǎn)擊，鼠標(biāo)移上某個(gè)菜單或者某個(gè)位置，顯示一個(gè)彈出框，移開(kāi)則隱藏彈出框，就是中效果，這種通常做法是每個(gè)子菜單下都有一個(gè)彈框，父元素相對(duì)定位，子元素絕對(duì)定位，只需要控制的彈框的顯示與隱藏即可，前言相信很多項(xiàng)目中都會(huì)有這樣一個(gè)小需求（PC端，移動(dòng)端則是點(diǎn)擊），鼠標(biāo)移上某個(gè)菜單或者某個(gè)位置，顯示一個(gè)彈出框，移開(kāi)則隱藏彈出框，就是css中h...

浠ラ箍 2019-08-02 10:10 評(píng)論0 收藏0
瀏覽器的各種位置值獲取

摘要：包括和屬性是可以賦值的，并且會(huì)立即自動(dòng)滾動(dòng)網(wǎng)頁(yè)到相應(yīng)位置，因此可以利用它們改變網(wǎng)頁(yè)元素的相對(duì)位置。另外，方法也有類(lèi)似作用，可以使網(wǎng)頁(yè)元素出現(xiàn)在瀏覽器窗口的左上角。網(wǎng)頁(yè)元素的位置那就是使用方法。就是透過(guò)瀏覽器看內(nèi)容的這個(gè)區(qū)域高度。獲取網(wǎng)頁(yè)的大小一張網(wǎng)頁(yè)的全部面積，就是它的大小，通常是由內(nèi)容和css樣式表決定的。瀏覽器窗口的大小，是在瀏覽器中看到的那部分網(wǎng)頁(yè)面積。又叫做viewport...

lvzishen 2019-08-21 11:53 評(píng)論0 收藏0
鼠標(biāo)事件和距離屬性

摘要：鼠標(biāo)事件中的各種距離鼠標(biāo)事件很多，不過(guò)每個(gè)事件中關(guān)于距離的屬性含義是一樣的，這里用來(lái)講解，具體的內(nèi)容會(huì)在不久之后寫(xiě)到了事件部分講解。 js中有很多距離，為了不會(huì)混淆這里總結(jié)一下其中部分距離本文包括元素屬性相關(guān)的距離和鼠標(biāo)事件中的距離，廢話不多說(shuō)，進(jìn)入正文先補(bǔ)充一下，本文的測(cè)試環(huán)境如下： Chrome Dev 54.0.2840.71Firefox 49.0Opera 41.0Saf...

stonezhu 2019-08-02 16:04 評(píng)論0 收藏0
鼠標(biāo)事件和距離屬性

摘要：鼠標(biāo)事件中的各種距離鼠標(biāo)事件很多，不過(guò)每個(gè)事件中關(guān)于距離的屬性含義是一樣的，這里用來(lái)講解，具體的內(nèi)容會(huì)在不久之后寫(xiě)到了事件部分講解。 js中有很多距離，為了不會(huì)混淆這里總結(jié)一下其中部分距離本文包括元素屬性相關(guān)的距離和鼠標(biāo)事件中的距離，廢話不多說(shuō)，進(jìn)入正文先補(bǔ)充一下，本文的測(cè)試環(huán)境如下： Chrome Dev 54.0.2840.71Firefox 49.0Opera 41.0Saf...

imtianx 2019-08-23 11:52 評(píng)論0 收藏0