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 