使用 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 时，它会反映在页面上，但不会在开发人员工具下（当您右键单击检查元素时打开）。例如假设以下 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";

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

Answer 1

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

Answer 2

对于问题 1，问题可能是您使用的开发工具（或开发工具中的视图）没有显示应用的样式，而只是显示样式表中基于选择器匹配该元素的规则。或者，换句话说，它只显示样式表中适用于您正在检查的元素的 css 规则。要查看在给定时间应用的样式，您需要通过检查 DOM 中的元素或使用 javascript 和 getComputedStyle 返回的 CSSStyleDeclaration 对象来检查样式。