在很多时候我们需要在一个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 是准确的。
演示效果: