javascript - 将样式值设置为 Javascript 变量

标签 javascript css variables html

我正在尝试创建一个文本出现在随机位置的页面。为此,我需要随机创建包含文本的 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 的方法,我们将不胜感激。

最佳答案

使用 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>

关于javascript - 将样式值设置为 Javascript 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20289831/

相关文章:

javascript - 如何在所有分辨率下将巨大图像上的文本保持在适当的位置?

c++ - 如何扩展先决条件列表中的 makefile 变量?

jquery - 为什么这个 jquery 变量没有被重置?

variables - sass中 "$root: &"是什么意思?

javascript - 强制获取图像数据到 https

javascript - 如何通过javascript根据变量显示内容?

css - 如何在从 if 加载样式(或捕获错误)之前测试 SWF URL?

javascript - 如何正确使用 nconf 和熨斗

javascript - Javascript 动态加速里程表

javascript - 如何通过CSS或javascript给句子赋予句子大小写?