一个JavaSript信息提示框的实现

在很多时候我们需要在一个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文件代码，里面附件了点其它的代码，但是不影响阅读：

 

<textarea cols="50" rows="15" name="code" class="xhtml">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;JS测试&lt;/title&gt; &lt;mce:script language="javascript" type="text/javascript"&gt;&lt;!-- //JS创建Html table function Create() { var oTable = document.createElement("table"); oTable.style.border = "1px solid red"; var oTbody = document.createElement("tbody"); oTable.appendChild(oTbody); oTbody.insertRow(0); var oRows0Cell0 = oTbody.rows[0].insertCell(0); oRows0Cell0.style.border = "1px solid blue"; oTbody.rows[0].cells[0].appendChild(document.createTextNode("呵呵")); oTbody.rows[0].insertCell[1]; oTbody.rows[0].cells[0].appendChild(document.createTextNode("哈哈")); document.body.appendChild(oTable); } //通过循环获得 相对于 Body left和top的距离 function getPos(oArg) { var oPos = new Object(); oPos.x = oArg.offsetLeft; oPos.y = oArg.offsetTop; while (oArg.tagName.toLocaleLowerCase() != "body" &amp;&amp; oArg.tagName.toLocaleLowerCase() != "html") { oArg = oArg.offsetParent; oPos.x += oArg.offsetLeft; oPos.y += oArg.offsetTop; } return oPos;//返回对象 } //这个全局变量用来记录我们创建的Div 这个节点 var oDiv; //显示提示框 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); } // --&gt;&lt;/mce:script&gt; &lt;/head&gt; &lt;body style=" text-align:center;" mce_style=" text-align:center;"&gt; &lt;div style="border: 1px solid red; height:500px; padding-left:100px; background-color:black; "&gt; &lt;input type="button" value="生成" onclick="Create();" /&gt; &lt;div style="width: 300px; height:200px; border: 1px solid blue; position:absolute; top:150px; left:200px; background-color:Gray;" &gt; &lt;input type="text" style="position:relative; top:100px; " name="try" onfocus="showHere(event,this);" onblur="OutHere();" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </textarea>

 

 

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