changing cssRules with javascript is not permanent

I generated some css from database values on Page_Load and Then wrapped it like-

CssDiv.InnerHtml =  "<style id=\"main_styles\" type=\"text/css\">\n" + {Css as string} + "\n</style>"

here CssDiv is like-

<div id="CssDiv" runat="server"></div>

user are allowed to change these css values with color pickers and drop downs. on change of picker or dropdown, I am making ajax call with the selected value to server, saving it into database. Now on success of this request, I have to change the content of $("style#main_styles") according to user's selection.

The problem is

1) When I am changing the Css its being reflected on the page but not under developer tool (that open when you right click to Inspect element). For example assume following css-

#zoneBody .blocktextContent {
    background-color: #99daee;
}

now user selected #1066cc from the picker, when my code runs #1066cc is being applied on the element "#zoneBody .blocktextContent" on page but when I am inspecting the element in the developer console its still showing-

#zoneBody .blocktextContent {
    background-color: #99daee; // while it should be- "background-color: #1066cc;"
}

2) The changes I made are not permanent on browser, i.e. when any other element on Page is causing partial post-back, although I am not touching CssDiv on server yet its resetting the users selection. (I have an update panel, that wraps complete page content, even CssDiv... This is causing partial post-backs).

I am using following code to apply the user's selection-

var layoutelement= "#zoneBody .blocktextContent";
var style = "background-color";
var stylevalue= "#1066cc"; // user's selection

var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
    var sheet = sheets[i];
    if (sheet.ownerNode.id == "main_styles") {
        var rules = sheet.cssRules;
        for (var j = 0; j < rules.length; j++) {
            var rule = rules[j];
            if (rule.selectorText == layoutelement) {
                rule.style.setProperty(style, stylevalue);
                // I also tried "rule.style[style] = stylevalue;"
                break;
            }
        }
        break;
    }
}

I can not use-

$(layoutelement).css(style, stylevalue);

because layoutelement can be more complex like-

layoutelement = "#zoneBody .blockTextContent a,#zoneBody .blockTextContent a:link,#zoneBody .blockTextContent a:visited,#zoneBody .blockTextContent a .yshortcuts";

I hope I am clear enough, but if you need any more description.. let me know in comments.. Thank you

回答1:

Instead of changing the values of the styles, why not write the styles down in advance, and just toggle the element's classes? You can use jQuery addClass, removeClass and toggleClass if you want. Much more practical than fiddling with the CSS style definitions themselves.

回答2:

For problem 1, the issue is probably that the developer tool (or view within the developer tool) you are using does not show applied styles, but simply the rules in the style sheet that match that element based on the selector. Or, in other words, it only shows the css rules in the style sheet that apply to the element you are inspecting. To see the styles that are applied at a given time, you will need to examine the styles by inspecting the element in the DOM or use javascript and the CSSStyleDeclaration object returned by getComputedStyle.