I am attempting to create a page where text appears in random locations. For this, I need the left and top distances in a DIV containing text to be created randomly. The following HTML is a basic idea of what I am thinking about.
<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>
How can I put variables in the style CSS of a DIV?
Also, any other ways to have a randomly relocating DIV would be appreciated.
asked Nov 29, 2013 at 16:19
William Offied
571 gold badge1 silver badge4 bronze badges
2 Answers 2
Get the element with javascript and change it's style properties :
<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>
answered Nov 29, 2013 at 16:22
adeneo
319k29 gold badges410 silver badges392 bronze badges
Sign up to request clarification or add additional context in comments.
3 Comments
William Offied
This looks like it works and is exactly what I'm looking for, but it does not work. The text stays in place.
Nick R
Add
position:absolute to the div ;-) left/right/top/bottom need a position property to work.adeneo
@WilliamOffied - if that code is everything, setting left and top values won't do anything as the element has no position, see above comment!
You've got to try something like this:
<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>
1 Comment
Nick R
myDiv.Left = leftvar; myDiv.Top = topvar; - invalid. It should be myDiv.style.leftdefault
document.getElementByIdfor example, and change the.styleproperties.