16 October, 2009
0 Comments
0 categories
To alter a CSS class with javascript, you can use the following function:
// Find the first css class based on parameter [className]. function GetStyleClass(className) { // Loop all loaded css style sheets for (var s = 0; s < document.styleSheets.length; s++) { // Check if browser uses [rules] var rules; if (document.styleSheets[s].rules) { rules = document.styleSheets[s].rules; } // Check if browser uses [cssRules] if (document.styleSheets[s].cssRules) { rules = document.styleSheets[s].cssRules; } // Check if browser supports css rules if (rules) { // Loop rules in css stylesheet for (var r = 0; r < rules.length; r++) { // Stop search and return rule, when classname is found if (rules[r].selectorText == '.' + className) { return rules[r]; } } } } // If css class not found, return null. return null; }
Usage of the function in ASP .NET:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Rvl.HelperTools.Website._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <!-- Load css styles --> <style type="text/css"> .Main { background-color:Silver; margin-left: auto; /* Center mainTable for >= IE6 */ margin-right: auto; /* Center mainTable for >= IE6 */ width: 800px; } </style> <!-- Correct css styles based on user screen resolution --> <script language="javascript" type="text/javascript"> // Find the first css class based on parameter [className]. function GetStyleClass(className) { // Loop all loaded css style sheets for (var s = 0; s < document.styleSheets.length; s++) { // Check if browser uses [rules] var rules; if (document.styleSheets[s].rules) { rules = document.styleSheets[s].rules; } // Check if browser uses [cssRules] if (document.styleSheets[s].cssRules) { rules = document.styleSheets[s].cssRules; } // Check if browser supports css rules if (rules) { // Loop rules in css stylesheet for (var r = 0; r < rules.length; r++) { // Stop search and return rule, when classname is found if (rules[r].selectorText == '.' + className) { return rules[r]; } } } } // If css class not found, return null. return null; } // Get main table css class var mainClass = GetStyleClass('Main'); // Change main table background color if class was found if (mainClass) { mainClass.style.backgroundColor = 'Red'; } </script> </head> <body> <form id="form1" runat="server"> <div class="Main"> <p>Some text</p> <p>Some more text...</p> </div> </form> </body> </html>
Tags: ASP .NETJavascript