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>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.