javascript - 使用 javascript 更改 cssRules 在客户端上不是永久性的，在部分回发后被清除

Question

我从 Page_Load 上的数据库值生成了一些 css，然后将其包装为-

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

这里的 CssDiv 就像-

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

用户可以使用颜色选择器和下拉菜单更改这些 css 值。在更改选择器或下拉菜单时，我正在使用选定的值对服务器进行 ajax 调用，并将其保存到数据库中。现在这个请求成功后，我必须根据用户的选择更改 $("style#main_styles") 的内容。

问题是

1) 当我更改 Css 时，它反射(reflect)在页面上而不是在开发人员工具下(当您右键单击以检查元素时打开)。例如假设以下 css-

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

现在用户从选择器中选择了 #1066cc，当我的代码运行时 #1066cc 被应用于元素“#zoneBody .blocktextContent "在页面上，但是当我在开发人员控制台中检查该元素时，它仍然显示-

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

2) 我所做的更改在浏览器上不是永久性的，即当页面上的任何其他元素导致部分回发时，尽管我没有在服务器上接触 CssDiv 但它重置了用户选择。(我有一个更新面板，它包含完整的页面内容，甚至是 CssDiv...这会导致部分回发)。

我正在使用以下代码来应用用户的选择-

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;
    }
}

我不能用-

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

因为 layoutelement 可以更复杂，比如-

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

我希望我已经足够清楚了，但如果您需要更多描述..请在评论中告诉我..谢谢

Answer 1

不是更改样式的值，why not write the styles down in advance, and just toggle the element's classes ？如果需要，您可以使用 jQuery addClass、removeClass 和 toggleClass。比摆弄 CSS 样式定义本身要实用得多。