Set Style Value as Javascript Variable

Question

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.

You can't echo out values like that. You need to do it in the function. Once you have your random numbers, then you need to find the element document.getElementById for example, and change the .style properties. — Nick R
– Nick R, Commented Nov 29, 2013 at 16:22

adeneo · Accepted Answer · 2013-11-29 16:34:12Z

8

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>

edited Nov 29, 2013 at 16:34

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 Over a year ago

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 Over a year ago

Add position:absolute to the div ;-) left/right/top/bottom need a position property to work.

adeneo Over a year ago

@WilliamOffied - if that code is everything, setting left and top values won't do anything as the element has no position, see above comment!

Satpal · Accepted Answer · 2013-11-29 16:25:03Z

0

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>

edited Nov 29, 2013 at 16:25

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Nov 29, 2013 at 16:24

kiks73

3,8383 gold badges30 silver badges55 bronze badges

1 Comment

Nick R Over a year ago

myDiv.Left = leftvar; myDiv.Top = topvar; - invalid. It should be myDiv.style.left

Collectives™ on Stack Overflow

Set Style Value as Javascript Variable

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related