以前所有操作都用彈窗彈個小層出來，然后最近整體換成了氣泡風格，點哪里操作浮層就出現在哪里。我采用的是共用一個操作浮層，隨元素位置而變換浮層的位置。

?

思路大概就是如下：

第一：確定浮層基于哪個元素定位

第二：根據目標元素的位置確定浮層的位置。

浮層的left值 = 整個元素的寬+然后得到元素左邊距離視口的距離；

浮層的top值 = 元素上邊距離視口的距離 - (或者+) 要微調的距離

（在例子里浮層左邊的三角形要對齊點擊的文字,所以要減去部分高度，因此具體的距離要自己根據需求微調）

我采用的調試方法是直接把浮層的top值先設為0，查看浮層的top值與元素的top值的關系，再來決定要微調的距離是什么

那怎么得到元素距離視口的距離呢，就是getBoundingClientRect方法。

element.getBoundingClientRect()會返回元素的高和寬以及元素本身的上下左右距離視口的距離;

?

補充一點：當頁面目標元素可能會因為整個頁面的滾動而改變位置時，浮層的高度或者寬度加上頁面滾動的距離即可。

與這個方法相關的一些兼容什么的在MSDN上有更詳盡的解釋：

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

在這篇文章中，利用這個方法完成了頁面內容跳轉的功能。（即點擊小標題，就跳轉對對應的標題部分）

http://www.cnblogs.com/xxcanghai/p/5015712.html

轉載于:https://www.cnblogs.com/coconutGirl/p/7505471.html

總結

以上是生活随笔為你收集整理的得到目标元素距离视口的距离以及元素自身的宽度与高度（用于浮层位置的动态改变）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。