Facebook
Banner
XMPP JavaScript Library READ MORE

JavaScript function to change multiple css of an element

JavaScript, Sachin Puri, 2012-11-01 22:01:45

Method 1

In following i have created a javascript function "cssMulti()" which will take two parameters:

  1. id of target element
  2. object which contans properties to be changed.

This function will loop through all the elements of object and apply these properties on target element

 

<html>
    <head>
        <style>
            #div1{border:1px solid; width:250px; height:250px}
        </style>
    </head>
    <body>
        <div id="div1">Hello World</div>
       
       
        <script>
            function cssMulti(element,css){
                var ele=document.getElementById(element);
                for(i in css){
                    ele.style[i]=css[i];
                }                
            }
           
            cssMulti('div1',{'background':'#cdcdcd','color':'red','font':'normal 14px verdana','padding':'5px'})
        </script>
    </body>
</html>

 

Method 2


document.getElementById("div1").style.cssText = "background:#cdcdcd; color:red; font:normal 14px verdana; padding:5px";


 

You can use one or the other based on the requirement of your program.

Add Your Comment
   
    Yes! I want to receive all comments by email

No Comments Posted Yet. Be the first one to post comment