一个JavaSript信息提示框的实现

最新推荐文章于 2024-09-10 14:15:01 发布

buddy83664

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： function input html div javascript 浏览器

本文链接：https://blog.csdn.net/buddy83664/article/details/4335221

版权

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在很多时候我们需要在一个Html控件获得光标的时候在控件旁边显示一个提示框，实现这个关键在于怎么定位当前控件的位置。这个位置可以是相对于浏览器左上角窗口的x,y坐标，也可以是相对于Body的X，Y坐标。相对于第一种方法，第二种方法实现起来会方便些，因为要获得相对于浏览器坐上窗口x,y坐标是比较繁琐在，在不同浏览器下面。

现在让我来讲一下，第二种方法我的实现

两个比较重要的方法第一，通过：HtmlObject.OffsetLeft HtmlObject.offsetTop 来获得HTML控件相对于它的offsetParent 的x和y的距离。然后，我们遍历offsetParent，将x,y距离相加。最终就得到了控件相对于body 的x，y的距离了。

最后我们通过用JavaScript创建一个Div，将提示内容键入到里面，再将Div 通过 appendChild方法加到Html文档的最下面，通过CSS 的positon:absolute 和 left top属性定位控件相对于最近的Body这个 parentElement 的x,y距离。

这里要说的是，虽然不同的浏览器对offsetParent的定义有不同，但是我们取的offsetLeft 和offsetTop 相对于Body 是准确的。

演示效果：

主要的关键代码：

//通过循环获得相对于 Body left和top的距离 function getPos(oArg) { var oPos = new Object(); oPos.x = oArg.offsetLeft; oPos.y = oArg.offsetTop; while (oArg.tagName.toLocaleLowerCase() != "body" && oArg.tagName.toLocaleLowerCase() != "html") { oArg = oArg.offsetParent; oPos.x += oArg.offsetLeft; oPos.y += oArg.offsetTop; } return oPos;//返回对象 }

//显示提示框 function showHere() { var oInput = document.getElementsByTagName("input")[1];//找到我们要显示提示框的那个控件对象 oDiv = document.createElement("div"); //设置CSS属性 oDiv.style.border = "1px solid black"; oDiv.style.background = "#FFC436"; oDiv.style.position = "absolute"; oDiv.style.width = oInput.offsetWidth+"px"; oDiv.style.fontSize = "12px"; oDiv.style.textAlign = "left"; var oText = document.createTextNode("友情提示友情提示友情提示友情提示友情提示友情提示友情提示友情提示"); oDiv.appendChild(oText);//将要显示的内容加入到Div中 document.body.appendChild(oDiv);/*将节点加入到*/ //下面是控制显示坐标 var oPos = getPos(arguments[1]); oDiv.style.left = oPos.x + "px"; /*Input控件的X坐标*/ oDiv.style.top = oPos.y + oInput.offsetHeight + "px"; /*控件的Y坐标+input高度*/ }

//删除DOM节点 function OutHere() { document.body.removeChild(oDiv); }

下面给出全部的Html文件代码，里面附件了点其它的代码，但是不影响阅读：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS测试</title> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body style=" text-align:center;" mce_style=" text-align:center;"> <div style="border: 1px solid red; height:500px; padding-left:100px; background-color:black; "> <input type="button" value="生成" οnclick="Create();" /> <div style="width: 300px; height:200px; border: 1px solid blue; position:absolute; top:150px; left:200px; background-color:Gray;" > <input type="text" style="position:relative; top:100px; " name="try" οnfοcus="showHere(event,this);" οnblur="OutHere();" /> </div> </div> </body> </html>

附件一个网上找到的比较经典的图片：