怎么判断子元素距离父元素顶部位置_js获取元素的距离父元素、窗口的距离offsetTop,offsetHeight,clientHeight...

前言

相信很多项目中都会有这样一个小需求(PC端,移动端则是点击),鼠标移上某个菜单或者某个位置,显示一个弹出框,移开则隐藏弹出框,就是css中hover效果,这种通常做法是每个子菜单下都有一个弹框,父元素相对定位,子元素绝对定位,只需要控制的弹框的显示与隐藏即可,但是,当鼠标移动到边界的菜单上时,弹框可能会超出外部元素的范围,如下图:

解决办法

动态的计算弹框距离外部元素的位置,即获取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight,如果弹框的宽度(offsetWidth)+距离左边的距离(offsetLeft)大于父元素的宽度,则判断为超出外部元素范围,需要动态改变弹框距离边框的位置

下面是对offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop图解

注意,这里对弹框的布局有限制,虽然弹框要隐藏,但是不能使用display:none的方式隐藏,可以使用opacity:0或者visibility: hidden隐藏元素,因为display:none方式不能获取到元素的高度,宽度等

下面是我写的一个demo

Title

#box {

width: 500px;

height: 500px;

background: #0a67fb;

margin: 100px auto;

position: relative;

}

#inner-box {

width: 200px;

height: 200px;

background: #00F7DE;

position: absolute;

top: 50px;

left: 320px;

visibility: hidden;

}

var box = document.querySelector('#box');

var innerbox = document.querySelector('#inner-box');

box.onmouseenter = function (e) {

var wrapperBoxWidth = box.offsetWidth;// 获取父容器宽度

var wrapperBoxHeight = box.offsetHeight;// 获取父容器高度

var innerBoxWidth = innerbox.offsetWidth;// 获取弹框宽度

var innerBoxHeight = innerbox.offsetHeight;// 获取弹框高度

var innerBoxLeft = innerbox.offsetLeft;// 获取弹框距离左侧宽度

var innerBoxTop = innerbox.offsetTop;// 获取弹框距离顶部高度

innerbox.style.visibility = 'visible' // 鼠标移入时显示弹框

// 如果弹框宽度+距离左侧宽度大于外部元素的宽度,则右侧溢出

if (innerBoxLeft + innerBoxWidth > wrapperBoxWidth) {

innerbox.style.left = 'auto'

innerbox.style.right = '10px'

}

// 如果弹框高度+距离顶部高度大于外部元素的高度,则底部溢出

if (innerBoxTop + innerBoxHeight > wrapperBoxHeight) {

innerbox.style.top = 'auto'

innerbox.style.bottom = '10px'

}

}

box.onmouseleave = function () {

innerbox.style.visibility = 'hidden' // 鼠标移开时隐藏弹框

}

以上代码亲测可以解决弹框溢出问题,如果道友有更好的解决办法,欢迎指出,不胜感激!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261542.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab实现同态滤波

定义 一幅图像可看成由两部分组成,即 fi代表随空间位置不同的亮度(Illumination)分量,其特点是缓慢变化,集中在图像的低频部分。fr代表景物反射到人眼的反射(Reflectance)分量,其特…

WordPress Mail Subscribe List插件‘sml_name’参数HTML注入漏洞

漏洞名称:WordPress Mail Subscribe List插件‘sml_name’参数HTML注入漏洞CNNVD编号:CNNVD-201306-205发布时间:2013-06-14更新时间:2013-06-14危害等级: 漏洞类型:输入验证威胁类型:远程CVE编…

大摩维持浩大游戏“增持”评级

网易科技讯 3月3日动静,摩根士丹利往日宣布投资陈诉,指出浩大游戏第四季度业绩凌驾预期,具有多个利好要素,另外该公司在Mochi Media平台方面的极力也值得垂青。因此,摩根士丹利维持浩大游戏“增持”的评级。以下为陈诉…

数字图像处理频域滤波实现低通与高通滤波(包含matlab代码)

低通滤波器 理想低通滤波 作用:保留频谱图中圆内低频分量,截断频谱图中圆外高频分量函数表示: 假设频谱中心在 (M/2,N/2)处,则任意频谱成分(u,v) 到中心(原点)的距离D(u,v) 定义为: D0为低通滤…

api报错 javaee maven_JavaEE关于Maven的配置与学习

关于Maven的配置与学习1. 简介官方说法:Apache Maven is a software project management and comprehension tool. Based on the concept of a project object model (POM), Maven can manage a projects build, reporting and documentation from a central piece …

jQuery以Post方式发送请求并获取返回的文件供下载!

用ajax请求文件下载当然是可以的,不用有返回值,代码差不多是这样: try{string FileName ".//doc//[大家网]Beginning.ASP.NET.2.0.E-Commerce.in.C#.2005.From.Novice.to.Professional[www.TopSage.com].pdf";FileName ".//…

Direct3D的一些小贴士收藏(转载)

GPU性能调试: 通常来说,使用CPU时间事件来调试GPU是低效并且是不准确的。D3D API在多数命令下会阻塞,甚至是Draw函数。它会在一些时间片上做一些真正的工作,而这往往是不可预知的。因此,GPU的性能调试只能用PIX或者是其…

数字图像处理同态滤波(matlab)

定义 一幅图像可看成由两部分组成,即 fi代表随空间位置不同的亮度(Illumination)分量,其特点是缓慢变化,集中在图像的低频部分。fr代表景物反射到人眼的反射(Reflectance)分量,其特…

Java并发编程-ReentrantLock源码分析

一、前言 在分析了 AbstractQueuedSynchronier 源码后,接着分析ReentrantLock源码,其实在 AbstractQueuedSynchronizer 的分析中,已经提到过ReentrantLock,ReentrantLock表示下面具体分析ReentrantLock源码。 二、ReentrantLock数…

谷歌浏览器好用的复制粘贴插件_copybetter增强复制 很好用的chrome复制粘贴插件 解除页面复制限制...

使用说明:增强复制(copybetter) 简介增强复制(copybetter)是一款国人开发的chrome浏览器复制增强扩展插件,作者参考了Copy Fixer和Autocopy两个扩展插件开发而成的。这里是他的个人网站:kodango.com。插件集成了关于复制粘贴功能的几个非常常…

绿色vmware 安装后看不到虚拟的网卡

绿色vmware 安装后看不到虚拟的网卡,按下面方法就可以添加。 1. 到Vmware 安装目录,运行 vmnetcfg,运行后出现虚拟网络编辑器 2. 转到主机虚拟适配器,单击添加 3. 转到网络连接就可以看到新增的vmware 虚拟网卡 转载于:https://www.cnblogs.c…

C语言strtok函数的用法

strtok是字符串切割函数 定义 参数一:待切割字符串参数二:分隔符集合首次调用时传递参数为: strtok(str,seps);之后再次调用时传递参数为: strtok(NULL,seps);​ 若可以切割,函数返回值为字符指针,各段切割好的字符串…

webservice接口等待时间_调用webservice超时问题的解决

1、web.config配置,里面增加:2、扩大代理类的超时限制,默认是90秒YourWebService yws new YourWebService();yws.Timeout 1200000; //20分钟3、IIS属性-网站 连接超时时间 1200秒1、修改 app.config 文件,添加如下代码&#x…

UItableViewCell滑动删除时,调整cell子视图的位置大小

UItableViewCell滑动删除时,调整cell的位置大小是否显示等。CustomTableViewCell为UITableViewCell的子类,在实现文件中重写willTransitionToState方法。willTransitionToState是在cell改变显示状态的时候调用,有三种状态:typedef…

表的转置

表的转置useSSISdroptablePTVgocreatetablePTV(TimeID nvarchar(10),ResourceID int,KPI1 numeric(38,2),KPI2 numeric(38,2),KPI3 numeric(38,2),KPI4 numeric(38,2),KPI5 numeric(38,2))goinsertintoptv values(101,1,2.78,3,5,4,4)insertintoptv values(102,2,2.7,50,95,44,…

51单片机C语言led流水灯及数码管实现秒表

51单片机C语言练习题 单片机型号 普中科技的 led练习题 led小灯闪烁 #include<reg52.h> sbit LED P0^0; void main() {unsigned int i0;while(1){LED 1;for(i0;i<60000;i);LED 0;for(i0;i<60000;i);} }led流水灯 #include<reg52.h>void main() {un…

extjs中元数据_Extjs中Store小总结

http://blog.csdn.net/without0815/article/details/77981701.什么是store&#xff1f;Store类似于一个本地仓库(即数据存储器),包括有 ArrayStore,DirectStore,GroupingStore,JsonStore,XmlStore(都是store的子类)最终主要用于提供给panel去显示.Store由Proxy(数据源)和DataRe…

内聚和耦合(自己的理解)

网上对于内聚和耦合的资料太多&#xff0c;这里结合我的感受和其他人的答案http://blog.csdn.net/zhiquan/article/details/4255161谈谈自己的理解 以下是我对内聚和耦合的理解&#xff08;例子来源于生活&#xff09;。 1.内聚&#xff1a; i.偶然内聚&#xff1a;如果一个模块…

UIButton return(textField textView)

首先设置TextField 或 TextView的 delegate /UITextView - (BOOL)textView:(UITextView *)textView shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text {if ([text isEqualToString:"\n"]) {NSLog("点击return");return NO;}retur…

(转)交换机攻击方法描述

利用交换机漏洞的攻击方法如下&#xff1a;一、生成树攻击生成树协议(STP)可以防止冗余的交换环境出现回路。要是网络有回路&#xff0c;就会变得拥塞不堪&#xff0c;从而出现广播风暴&#xff0c;引起MAC表不一致&#xff0c;最终使网络崩溃。使用STP的所有交换机都通过网桥协…