Question

Javascript 帮助使用 createElement() 和 appendChild()

2015-06-10

1216

javascript html dom

我在为项目编写 JavaScript 时遇到了麻烦。我有 HTML 代码：

<html>
<head>
<title>Mouse Tail and Spawn</title>
<script src="tail.js"></script>
</head>
<body>
<div id="tail" style="position:absolute; display:none">
Click to spawn an egg.
</div>
</body>
</html>

我想编写 JavaScript，让 div 中的文本跟随鼠标光标，并在鼠标单击时生成“o”。我想使用 DOM 方法 createElement 和 appendChild 来实现这一点，但我脑子里想不出如何实现，目前我还没有编写 JavaScript。有人有这方面的教程链接或任何帮助提示吗？

Answer 1

这实际上相当简单。我们只需要监听根元素上的点击，检查点击事件对象的点击坐标，并设置临时元素的一些基本样式：

// Listen for click events on the <body> element
document.documentElement.addEventListener( "click", function ( event ) {
    
    // Create an element to hold out "o", and some styles
    var element = document.createElement( "span" ),
        elStyle = {
            position: "absolute",
            top: event.clientY + "px",
            left: event.clientX + "px",
        };
    
    // Apply our styles to the element
    Object.keys( elStyle ).forEach( function ( property ) {
        element.style[ property ] = elStyle[ property ];
    });
    
    // Set the innerHTML of the element, and insert it into the <body>
    element.innerHTML = "o";
    document.body.appendChild( element );
    
});

html { cursor: pointer }

Answer 2

如果您想将“o”放到光标位置，请查看我的小提琴。我不知道这是否是您想要做的，但是...

https://jsfiddle.net/f2op1prs/

$(window).mousemove(function(e) {
            $node = $('#following');
            $node.css('left', e.pageX);
            $node.css('top', e.pageY);
        });
        $(window).click(function(e) {
            $node = $('<div></div>');
            $node.addClass('tail');
            $node.html('o');
            $node.css('left', e.pageX);
            $node.css('top', e.pageY);
            $('body').append($node);

        });

Answer 3

您走了，我想这是您想实现的目标，对吗？根据您的需要进行更改。

838176796

Dimag Kharab

2015-06-10