黑马程序员技术交流社区

标题: js中动态控制元素的显示位置 [打印本页]

---

作者: 王怀亮    时间: 2013-4-15 11:08
标题: js中动态控制元素的显示位置
代码如下

1. var showBoxE = null;
   
2. function createInfoBox()
   
3. {       
   
4. showBoxE = document.createElement("div");
   
5. showBoxE.id='showBox';
   
6. showBoxE.style='position:absolute;z-index:0;display:block;padding:4px;width:200px;height:0px;background-color:#ff9900;border:4px solid #EFEFEF;color:#ffffff;font-size:12px;';
   
7. var s = document.getElementById('box');
   
8.         s.insertBefore(showBoxE);
   
9. }
   
10. function showInfo(str)
    
11. {
    
12.         if(document.getElementById("showBox")==null)
    
13.         {
    
14.                 createInfoBox();
    
15.         }
    
16.         showBox.style.left = event.clientX+document.body.scrollLeft+event.srcElement.clientWidth-event.offsetX+"px";
    
17.         showBox.style.top = event.clientY+document.body.scrollTop-event.srcElement.clientHeight+"px";
    
18.         showBox.innerText = str;
    
19.         showBox.style.display = "block";
    
20. }

复制代码

我希望用js动态生成含有提示语句的div，现在div和语句都能显示了，可是总是显示在该div所在div的最下方，我想通过

1. showBox.style.left = event.clientX+document.body.scrollLeft+event.srcElement.clientWidth-event.offsetX+"px";
   
2.         showBox.style.top = event.clientY+document.body.scrollTop-event.srcElement.clientHeight+"px";

复制代码

这两句代码将动态生成的提示div显示在鼠标所在元素的右边，可是这两句话加上后貌似没有任何效果，那位前辈能帮忙看看呢

---

作者: 王怀亮    时间: 2013-4-16 20:35
没人理我，呜呜，自己顶一下了

---

作者: 杜鹏飞    时间: 2013-4-17 22:39
不明觉厉,不懂帮顶

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2