How to apply css to a dynamically created div?


Tags: javascript,html,css

Problem :

Here I have a function that creates a div box, but I wish to move the styling to a external css file. When I do that, however, the boxes are no longer styled. How could I apply the css to the div boxes that are created dynamically? Is it even worth moving the styling to an external css file?

    function createBox() {
        var box = document.createElement("DIV");
        box.setAttribute("id", "box");
        document.body.appendChild(box);
        boxStyle = box.style;
        boxStyle.position = "absolute"; 
        boxStyle.background = '#'+Math.floor(Math.random()*16777215).toString(16);
        boxStyle.width = Math.floor(Math.random()*50) + '%';
        boxStyle.height = Math.floor(Math.random()*50) + '%';
        boxStyle.top = Math.floor(Math.random()*100) + '%';
        boxStyle.left = Math.floor(Math.random()*100) + '%';
    }   

EDIT: I realized that what's been causing me grief in my CSS is that I was using Math.floor and Math.random() functions that don't work in CSS. Silly me!



Solution :

As you are creating div with id #box, add the following css in the external css file and include it in the <head>

#box {
          position: absolute;
          background: red;
          width: 90px;
          height: 50px;
          left: 100;
          top: 100;
        }

It looks like you will creating more boxes of with same id #box. I would recommend you to create based on classes. And use css to apply the styles based on the classname.

function createBox() {
        var box = document.createElement("DIV");
        box.setAttribute("class", "boxes");
        document.body.appendChild(box);
    }   

css:

.boxes {
    position: absolute;
    background: red;
    width: 90px;
    height: 50px;
    left: 100;
    top: 100;
 }

demo


    CSS Howto..

    How to disable css warning “Unknown property” in Eclipse Mars?

    how to center image + text in an li Element

    How to check if css value is supported by the browser?

    How to position an image inside a DIV with dynamic height with pure CSS/HTML?

    How to override custom placeholder css

    How to style html element directly (inline)?

    How to apply custom CSS on Facebook comment box plugin

    How to hyperlink a css box [closed]

    How to move up an inner box and keep outer box in place with CSS?

    How to disable button using jquery in materialize css

    How is CSS linked to [closed]

    How to include .css file in smarty template file?

    How to select nested UL element without class in JavaScript

    How do I horizontally extend the clickable area of an inline span?

    How can I use bootstrap in css file?

    How to override bootstrip.min.css in Joomla-Template CSS file for width 768-1140px

    Element has greater px width than device viewport but still shows completely (mobile web app)

    How to style differently only the first list item from unsorted list

    How can I enable/disable(in real time) javascript plugins on a webpage?

    How to get element position relative to parent?

    How do CSS sprites speed up a web site?

    How to work with gradients in CSS / list of online CSS gradient generators [closed]

    how to edit the width of menu bar in dreamweaver

    How do i hook media queries to screen resolution?

    Show required asterisk star after the text?

    How to center and span table heading (row)

    How to have constants in Flex CSS files

    CSS: How to Solve this “Site-Is-Too-Big” Challenge?

    How to keep responsiveness while expanding div background height in CSS?

    How to select an element and its first child without repetition in CSS?