Assigning multiple css rule's to an element in javascript

Question

Here is few line of java script code to create a div element dynamically. But my doubt is after create that element, is there any short-cut way to assign multiple css rules instead of typing (container.style) again and again.

<script>
    (function(){
        window.onload = function(){
            var container = document.createElement('div');
            container.style.width = '500px';
            container.style.height = '200px';
            container.style.backgroundColor = 'red';
            container.style.margin = '0 auto';

            document.body.appendChild(container);
        }
    }());
</script>

Look into jQuery, it has a method .css() which you can use to apply many css styles. — Kyle
– Kyle, Commented Jan 4, 2013 at 8:01
In jquery it is very easy. but is there any short-cut for javascript also. — naresh kumar
– naresh kumar, Commented Jan 4, 2013 at 8:06

SeanLi · Accepted Answer · 2013-01-04 08:03:08Z

5

Use a CSS class and assign the class to the element:

.MyClass {
   width: 500px;
   height: 200px;
   background-color: red;
   margin: 0 auto;
}

Then container.className = "MyClass";

answered Jan 4, 2013 at 8:03

SeanLi

1942 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thirdender · Accepted Answer · 2013-01-04 08:17:45Z

You could use a for loop to iterate over an object, applying the properties to the style property one-by-one:

(function(){
    window.onload = function(){
        var container = document.createElement('div'),
            styles = {
                "width": "500px",
                "height": "200px",
                "backgroundColor": "red",
                "margin": "0 auto"
            },
            i;
        for (i in styles) {
            container.style[i] = styles[i];
        }

        document.body.appendChild(container);
    }
}());

It's worth noting that this is longer than the original code :-p If you wrap the for loop in another function and re-use the function repeatedly it could be useful. If you find yourself needing this repeatedly, I would highly recommend including jQuery (or ZeptoJS) and using .css(…) to apply the CSS. jQuery does several transformations to the properties as it applies them… It changes hyphens in the property names to the correct camel casing, makes changes to apply the correct properties or property values for IE, etc. It makes the coding much easier, and any future code maintainers will benefit from that ease as well.

Dineshkani · Accepted Answer · 2013-01-04 08:04:45Z

0

You can use like this

var container = document.createElement('div');
                container.setAttribute("id","div1");
                document.body.appendChild(container);

$("#div1").css({"width":"500px","height":"200px","background-color":"red"});

Demo

answered Jan 4, 2013 at 8:04

Dineshkani

3,0137 gold badges34 silver badges45 bronze badges

Comments

Cerbrus · Accepted Answer · 2013-01-04 08:26:04Z

0

You could write your own css function:

<script>
    (function(){
        window.onload = function(){
            var container = document.createElement('div');
            css(container,
                {'width': '500px',
                 'height': '200px',
                 'backgroundColor': 'red',
                 'margin': '0 auto'});

            document.body.appendChild(container);
        }

        function css(element, style){
            for(key in style){
                if(style.hasOwnProperty(key)){
                    element.style[key] = style[key];
                }
            }
        }
    }());
</script>

You can then re-use the css() function for other elements.

answered Jan 4, 2013 at 8:26

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Collectives™ on Stack Overflow

Assigning multiple css rule's to an element in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related