为什么在CSS中的绝对位置在javascript中无法正常工作

Question

<html>
<head>
<style>

#wrapper{
position: absolute;
   top : 250px;
    width: 500px;
    height: 500px;
    border: 1px solid red;
}


.tagging{
position: absolute;  
   border: 1px solid black;
   width : 20px;
   height: 30px;


}


</style>
<script>
window.onload = function(event){
     var wrapper =  document.getElementById("wrapper");

     var wrapperOffsetTop = wrapper.offsetTop;


     wrapper.onmousedown = function(event){

          var div = document.createElement("div");
          div.className = "tagging";
         div.style.top = event.clientY  - wrapperOffsetTop;
         wrapper.appendChild(div);

     }
}
</script>

</head>
<body>
<div id="wrapper">

</div>
</body>
</html>

这是我的代码。 我希望成为一个可以使用户单击该区域的应用程序，它将在div框后附加鼠标光标的位置，但似乎不起作用。 为什么？？

在我添加+"px"之后，这对我来说是完美的

但是为什么在我的真实应用程序中它不起作用：

<html>
<head>
<style>
.tagging{
    border: 1px solid red;
    position: absolute; 
    padding: 0px;
    margin: 0px; 
    width : 20px;
    height: 20px;

}
</style>
<script>
  window.onload = function(){

      //get Information about imgWrapper
     var imgWrapper = document.getElementById("imgwrapper");
     var wrapperOffsetTop = imgWrapper.offsetTop;
     var wrapperOffsetLeft = imgWrapper.offsetLeft;


  //set the image wrapper to be the same size as the image
     var img = document.getElementsByTagName('img');
     imgWrapper.style.width = img[0].width;

     //when image wrapper is click, append div element
     img[0].onmousedown = function(event) {
       event.preventDefault();

       //create tag with class
       var div = document.createElement("div");
       div.className = "tagging";
        imgwrapper.appendChild(div);

        //get the position of mouse cursor
         var mouseX = event.clientX;
         var mouseY = event.clientY;

       //set the position of the div
        div.style.top =  (mouseY - wrapperOffsetTop) + "px";
        div.style.left  = (mouseX - wrapperOffsetLeft) + "px";  





         //mousemove event

        //assign mouse move action on image

        //mouse up



     }

  }
</script>
</head>
<body>
<div id="imgwrapper">
<img src="jlin.jpg">
</div>
<form action="./yipee.php" method="POST" id="noob">
<input type="submit">
</form>
</body>
</html>

Answer 1

您正在将top属性设置为Number 。 期望CSS长度，需要单位。

div.style.top = (event.clientY - wrapperOffsetTop) + "px";

Answer 2

更新：初始代码适用于Firefox和Chrome。 要使其在不支持W3 DOM事件对象的IE8中工作，您需要选择window.event if（！event）{event = window.event; }

除非我误解了您的问题，否则它应该只是在为左边距的偏移量添加偏移量的情况下：

<html>
<head>
<style>

#wrapper{
position: absolute;
   top : 250px;
    width: 500px;
    height: 500px;
    border: 1px solid red;
}


.tagging{
position: absolute;  
   border: 1px solid black;
   width : 20px;
   height: 30px;


}


</style>
<script>
window.onload = function(event){
     var wrapper =  document.getElementById("wrapper");

     var wrapperOffsetTop = wrapper.offsetTop;
     var wrapperOffsetLeft = wrapper.offsetLeft;


     wrapper.onmousedown = function(event){

          if (!event) {
              event = window.event;
          }
          var div = document.createElement("div");
          div.className = "tagging";
         div.style.top = event.clientY  - wrapperOffsetTop;
         div.style.left = event.clientX  - wrapperOffsetLeft;
         wrapper.appendChild(div);

     }
}
</script>

</head>
<body>
<div id="wrapper">

</div>
</body>
</html>

为什么在CSS中的绝对位置在javascript中无法正常工作

问题描述

2 个解决方案

解决方案1
5 已采纳 2013-09-05 09:53:25

解决方案2
2 2013-09-05 09:59:22

为什么在CSS中的绝对位置在javascript中无法正常工作

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-09-05 09:53:25

解决方案2 2 2013-09-05 09:59:22

解决方案1
5 已采纳 2013-09-05 09:53:25

解决方案2
2 2013-09-05 09:59:22