When there will be a requirement to change the web page layout on the fly with different colors and backgrounds than following is a PERFECT solution for that.
You need to follow the three steps to implement the same.
1). Add .CSS file that is mentioned below.
2). Add “changeCSS” function in .aspx/html file which is mentioned below.
3). The “changeCSS” will take FOUR arguments as below:
1. The name of the style sheet.
2. The name of the class that you want to edit // in below case it is “.nishant”
3. The element of class, of which you want to modify the value // in below case it is “color”
4. The value of the element // in below case it is “green”
Following is a HTML code:
<head runat=”server”>
<title></title>
<link href=”style/style.css” rel=”stylesheet” type=”text/css” media=”all” /> // style sheet is given below
<script language=”javascript”>
function ChangeColor() {
changeCSS(document.styleSheets[0], ‘.nishant’, ‘color’, ‘green’);
}
function changeCSS(theCSS, theClass, element, value) {
//Last Updated on July 28, 2010
//documentation for this script at
//http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html
var cssRules;
var added = false;
if (theCSS[‘rules’]) {
cssRules = ‘rules’;
} else if (theCSS[‘cssRules’]) {
cssRules = ‘cssRules’;
} else {
//no rules found… browser unknown
}
for (var R = 0; R < theCSS[cssRules].length; R++) {
if (theCSS[cssRules][R].selectorText == theClass) {
if (theCSS[cssRules][R].style[element]) {
theCSS[cssRules][R].style[element] = value;
added = true;
break;
}
}
}
if (!added) {
if (theCSS.insertRule) {
theCSS.insertRule(theClass + ‘ { ‘ + element + ‘: ‘ + value + ‘; }’, theCSS[cssRules].length);
} else if (theCSS.addRule) {
theCSS.addRule(theClass, element + ‘: ‘ + value + ‘;’);
}
}
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<input type=”button” onclick=”ChangeColor();” title=”Click” /> // function calling
<p>
nishant dave</p> // this value will be changed
</div>
</form>
</body>
</html>
Following is .CSS file
@charset “utf-8”;
.nishant
{
padding-right: 10px;
color:Red;
font-size:large;
font-family:Verdana;
}
Happy Programming!
Nishantdave's Blog 
jigar
July 28, 2010 at 11:14 am
Nice and pretty usefull resource.
We are using it in our application for chaning font size at run time.
Check out cool feature of the same in http://regis.com.au.
Cheers
Jigar
Pranav Rajyaguru
July 28, 2010 at 11:14 am
Thanks Nishant,
This is very helpful article. Keep posting blogs like this.
Samir Varteji
July 28, 2010 at 11:17 am
Hi Nishant,
Great post buddy, this will be useful to achieve twitter type of design change layout facility on the fly in any application where we can change any element of css class based on selected theme color and preview the page.
Keep it up.
Samir Varteji
Bhavesh Soni
July 28, 2010 at 11:20 am
Nice blog to achieve dynamic layout, colors & css functionalities.
Vimal
July 28, 2010 at 11:47 am
Good article/stuff Mr. Nishant………
Thanks for sharing….
Adam Cable
November 3, 2010 at 4:48 pm
Awesome piece of code – just saved me hours – thanks 🙂
Nishant Dave
November 9, 2010 at 1:45 pm
you are welcomed. Enjoy………
aldobaglio
January 7, 2011 at 11:06 am
Great post
I’d like to be able to save the just modified CSS into a .css file
How can I do that?