Question

我正在尝试创建一个函数，该函数应该使用鼠标坐标并使用它们的值绘制一个小半径并将它们插入到css左侧和顶部位置。我被困在我应该将我创建的div添加到html的部分。如果我不够清楚，请原谅我。

              <script type="text/javascript">
           function getcoord(event) {
           var x=event.clientX  ;
           var y=event.clientY  ;
           follow(x,y);
           function follow(xcor,ycor) {
           folowHTML =
'<div style="'background-color:red;width:30px;height:30px;'
   +'border-radius:30px;position:absolute;left:''+xcor;'top:'+ycor';">' 
   +'</div>';

          };}
                 </script>
                 <body onmouseover="getcoord(event);">

                  </body>

Answer 1

也许尝试添加这一行：

document.body.innerHtml = folowHTML + document.body.innerHtml;

此外，您应该将位置absolute更改为fixed我认为。

编辑：这是不好的方式

在这里你有答案： Instert element before </body> tag with vanilla JavaScript

Answer 2

你可以试试这样的......

<style>
    #follow {
        background-color: #fff;
        border:1px solid red;
        border-radius: 50%;
        height: 20px;
        margin:-10px 0 0 -10px;
        position: absolute;
        width: 20px;
        z-index: 10;
    }
</style>
<script>
    function initFollow(){

        var follow = document.createElement('div');

        follow.setAttribute('id','follow');
        document.getElementsByTagName("body")[0].appendChild(follow);

        window.addEventListener('mousemove', function(e) {
            var left = e.pageX + 'px',
                top  = e.pageY + 'px';
            follow.style.left = left;
            follow.style.top = top;
        }, false);

    }
    window.addEventListener('load',initFollow,false);
</script>

如何使用javascript将div添加到html代码中

2 个答案:

编辑：这是不好的方式