Question

我正在尝试创建一个文本出现在随机位置的页面。为此，我需要随机创建包含文本的DIV中的左侧和顶部距离。以下HTML是我正在考虑的基本概念。

<body>
    <script>
        function myFunction() {
            var leftvar = Math.round(Math.random()*1000);
            var topvar = Math.round(Math.random()*1000);
        }
        window.onload = myFunction;
    </script>
    <div style="left:leftvar; top:topvar;">
        <p>Test</p>
    </div>
</body>

如何将变量放在DIV的样式CSS中？

此外，任何其他方式有一个随机重新定位DIV将不胜感激。

Answer 1

使用javascript获取元素并更改其样式属性：

<head>
    <style>#myDiv {position: relative;}</style>
</head>
<body>
    <script>
        function myFunction() {
            var leftvar = Math.random()*1000;
            var topvar = Math.random()*1000;

            var elem = document.getElementById('myDiv');

            elem.style.left = leftvar + 'px';
            elem.style.top  = topvar + 'px';            
        }
        window.onload = myFunction;
    </script>
    <div id="myDiv">
        <p>Test</p>
    </div>
</body>

Answer 2

你必须尝试这样的事情：

<body>
    <script>
        function myFunction() {
            var leftvar = Math.random()*1000;
            var topvar = Math.random()*1000;
            var myDiv = document.getElementById('mydiv');
            myDiv.Left = leftvar;
            myDiv.Top = topvar;
        }
        window.onload = myFunction;
    </script>
    <div id='mydiv'>
        <p>Test</p>
    </div>
</body>

将样式值设置为Javascript变量

2 个答案: