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

張憲坤發(fā)布于2019-08-22 16:11 / 1730人閱讀

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

前言

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

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

注意，這里對彈框的布局有限制，雖然彈框要隱藏，但是不能使用display:none的方式隱藏，可以使用opacity:0或者visibility: hidden隱藏元素，因為display:none方式不能獲取到元素的高度，寬度等 下面是我寫的一個demo




    
    Title

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

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

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

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

相關(guān)文章

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

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

draveness 2019-08-30 14:25 評論0 收藏0
js獲取元素的距離父元素、窗口的距離offsetTop,offsetHeight,clientHei

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

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

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

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

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

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

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

imtianx 2019-08-23 11:52 評論0 收藏0