Assign JavaScript variable as the value for styling

Question

Assign JavaScript variable as the value for styling

I am looking to create a unique webpage where text appears in various random locations each time the page is loaded. To achieve this, I need to set the left and top distances of a DIV element containing text at random positions on the page. The code snippet provided below gives an overview of my initial idea:

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

How can I apply variables to the CSS style of a DIV element?

If you have any alternative methods for creating a dynamically relocating DIV, please share them as well. Thank you!

javascript css variables html

Answer 1

Answer №1

Modify the style properties of an element using JavaScript:

<head>
    <style>#myElement {position: absolute;}</style>
</head>
<body>
    <script>
        function changeStyle() {
            var newLeft = Math.random()*800;
            var newTop = Math.random()*800;

            var target = document.getElementById('myElement');

            target.style.left = newLeft + 'px';
            target.style.top  = newTop + 'px';            
        }
        window.onload = changeStyle;
    </script>
    <div id="myElement">
        <p>Example</p>
    </div>
</body>

Answer 2

Modify the style properties of an element using JavaScript:

<head>
    <style>#myElement {position: absolute;}</style>
</head>
<body>
    <script>
        function changeStyle() {
            var newLeft = Math.random()*800;
            var newTop = Math.random()*800;

            var target = document.getElementById('myElement');

            target.style.left = newLeft + 'px';
            target.style.top  = newTop + 'px';            
        }
        window.onload = changeStyle;
    </script>
    <div id="myElement">
        <p>Example</p>
    </div>
</body>

Answer 3

Answer №2

Take a shot at something similar to this:

<body>
    <script>
        function changePosition() {
            var leftPos = Math.random()*1000;
            var topPos = Math.random()*1000;
            var myDiv = document.getElementById('mydiv');
            myDiv.style.left = leftPos + 'px';
            myDiv.style.top = topPos + 'px';
        }
        window.onload = changePosition;
    </script>
    <div id='mydiv'>
        <p>Test</p>
    </div>
</body>

Answer 4

Take a shot at something similar to this:

<body>
    <script>
        function changePosition() {
            var leftPos = Math.random()*1000;
            var topPos = Math.random()*1000;
            var myDiv = document.getElementById('mydiv');
            myDiv.style.left = leftPos + 'px';
            myDiv.style.top = topPos + 'px';
        }
        window.onload = changePosition;
    </script>
    <div id='mydiv'>
        <p>Test</p>
    </div>
</body>

Assign JavaScript variable as the value for styling

Answer №1

Answer №2

Similar questions

Updating Bootstrap variables

Employing PHP to verify the activation of a CSS stylesheet in an if/else statement

Retrieving PNG image from dynamically created PDF file with DomPDF

Utilizing JQuery to track DIV clicks

Can Angular-Material help create a sidenav that toggles on and off?

Hide button for the last input form to dynamically remove in jQuery

Implementing the delete functionality in a mongoose model and displaying the result in an object page using mongo

Concealing a tab within a WordPress site

What is preventing me from accessing React state within Tracker.Autorun?

What is the best method for styling the "body" of multiple pages in a React.js application to prevent them from overlapping?

Angular 4.0 has discontinued the use of the ngGetContentSelectors() method

Promise.allSettled() - Improving resilience through retry mechanisms for concurrent asynchronous requests

Simple method for displaying or hiding divs depending on the status of a selected radio button using CSS only

How can we use forEach on an array or JSON data while sorting by the most recent date?

jQuery is unable to retrieve the parent element of a dynamically generated element as it returns as undefined

What is the best way to include various audio tracks from my array list?

Tips for programmatically choosing a text range within CKEDITOR stages?

JavaScript encountered an error stating "phone is not defined" due to an uncaught ReferenceError

How to identify an element based on the text content of the element that follows it using XPath

Header text refuses to cooperate and center itself