为什么我生成的图像没有根据鼠标光标设置位置？

Question

I am fairly new to web development and I wanted to practice the HTML, CSS, and Javascript that I learned over the weekend. 我是Web开发的新手，我想练习上周末学到的HTML，CSS和Javascript。 I am having trouble positioning my images correctly based on my mouse cursor. 我无法根据鼠标光标正确定位图像。 I can see that my images are being appended in the "inspect" section of google chrome but their positioning is not matching up with how the style indicates. 我可以看到我的图片已附加在Google chrome的“检查”部分中，但是它们的位置与样式指示不符。 Is there a problem with my HTML, CSS, or Javascript or all three? 我的HTML，CSS或Javascript或这三者有问题吗？ I want it to work similarly to http://howlooongcanthisgoon.com/ 1 [ 我希望它的工作方式类似于http://howlooongcanthisgoon.com/ 1 [ ] 2 ] 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Jaws that Bite My Claws That Catch</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        #witchwood{
            background: url("witchwood.jpg");
            height: 100vh;
            background-position: 75% 20%;
            overflow: hidden;
        }

        .shudder{
            position: absolute;
        }


    </style>


</head>
<body>
    <div id="witchwood" onclick="wok(event)"></div>
</body>
    <script type="text/javascript">
        //document.getElementById('witchwood').addEventListener("click", wok);
        var z = 0;
        function wok(e){
            //finds position of mouse
            var x= e.clientX;
            var y= e.clientY;

            //creates the img element
            var img = document.createElement("img");
            img.src = "shudderwock.png";
            img.class = "shudder";
            img.style.top = y + "px";
            img.style.left = x + "px";

            //appends the img into the div class="witchwood"
            document.getElementById('witchwood').appendChild(img);

        }

    </script>

</html>

Here is a link to the jsfiddle . 这是jsfiddle的链接。

Answer 1

Your .shudder class is not being applied. 您的.shudder类未应用。 The appropriate DOM property is called className . 适当的DOM属性称为className 。 You don't set an HTMLElement attribute with img.class . 您无需使用img.class设置HTMLElement属性。

Change 更改

img.class = "shudder";

To 至

img.className = "shudder";

Alternatively, you could use; 另外，您可以使用;

img.setAttribute('class', 'shudder');

为什么我生成的图像没有根据鼠标光标设置位置？

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-04-24 01:15:49

为什么我生成的图像没有根据鼠标光标设置位置？

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-04-24 01:15:49

解决方案1
3 已采纳 2018-04-24 01:15:49