Method 1
In following i have created a javascript function "cssMulti()" which will take two parameters:
- id of target element
- 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.
