动态加载的 CSS 在 Windows 8 应用程序中无效

Question

我已经动态加载了一个 CSS 文件，并将其放置在 Windows 8 应用程序的 style 标记内。

这是我加载 CSS 的方式

function loadHeaders() {
    var monobookCSSURL = "http://lego.wikia.com/wiki/MediaWiki:Monobook.css?action=raw&ctype=text/css";

    WinJS.xhr({ url: monobookCSSURL }).then(loadCSS, xhrError);
}

function loadCSS(result) {
    var css = result.responseText;

    var style = document.createElement("style");
    style.innerText = css;

    document.getElementsByTagName("head")[0].appendChild(style);
}

当我在 Visual Studio 中使用 DOM Explorer 查看加载的内容时，我看到了我所期望的，head 中的最后一个标记是包含我的 CSS 的 style。

但是，当我查看我的页面时，加载的 CSS 没有任何影响。

我通过在 HTML 源代码中手动添加另一个 style 标记来测试这一点，这有效果，但动态的没有。

如何让这个 CSS 产生效果？

这是生成的样式标签：

#p-cactions ul li { } #p-cactions ul li a { } ＃内容 { } 身体 { 背景：RGB（244、248、255）； } div.tleft { 边框：当前颜色； } div.tright { 左边距：13px； } .content-bg { 背景：白色； } 前{ 溢出：自动； } .pBody { 背景色：rgb(222, 227, 232); } 身体 { 背景：#103A5A 网址（http://images2.wikia.nocookie.net/lego/images/f/f0/Studs-tile.png）； } #p-个人李一{ 颜色：#DEE3E8； } .portlet h5 { 颜色：#FFFFFF；显示：块；高度：15px；背景颜色：#355C70；文本转换：大写； } 身体[类*='ns-118'] { } 身体[类*='ns-119'] { } body[class*='ns-118'] #p-personal li a { 颜色：#DEE8E3； } body[class*='ns-119'] #p-personal li a { 颜色：#DEE8E3； } 正文[class*='ns-118'].portlet h5 { 颜色：#FFFFFF；显示：块；高度：15px；背景颜色：#35705C；文本转换：大写； } 正文 [class*='ns-119'].portlet h5 { 颜色：#FFFFFF；显示：块；高度：15px；背景颜色：#35705C；文本转换：大写； } 身体[类*='ns-116'] { } 身体[类*='ns-117'] { } body[class*='ns-116'] #p-personal li a { 颜色：#E8DEE3； } body[class*='ns-117'] #p-personal li a { 颜色：#E8DEE3； } 正文 [class*='ns-116'].portlet h5 { 颜色：#FFFFFF；显示：块；高度：15px；背景颜色：#90152C；文本转换：大写； } 正文 [class*='ns-117'].portlet h5 { 颜色：#FFFFFF；显示：块；高度：15px；背景颜色：#90152C；文本转换：大写； } 正文 [class*='Forum_Brickiforums'] { } body[class*='Forum_Brickiforums'] #p-personal li a { 颜色：#E8DEE3； } body[class*='Forum_Brickiforums'].portlet h5 { 颜色：#FFFFFF；显示：块；高度：15px；背景颜色：#B0B02C；文本转换：大写； } #title-rating2 { 显示：无； } #页脚{ 背景：#DEE3E8；边框颜色：#355C70； } .wikiaOnly { 显示：无； } div.User-help-badge-1 { 左：500px；顶部：2px；位置：绝对； } div.User-help-badge-2 { 左：540px；顶部：2px；位置：绝对； } div.User-help-badge-3 { 左：580px；顶部：2px；位置：绝对； } div.User-help-badge-4 { 左：620px；顶部：2px；位置：绝对； } div.User-help-badge-5 { 左：660px；顶部：2px；位置：绝对； } .infoboxtoc .toc { 边距：0px；填充：0px；边框：当前颜色；宽度：100%； } .infoboxtoc #toctitle { 显示：无； } .infoboxtoc .NavHead { padding-right: 2px;底部填充：12px；浮动：对； } .infoboxtoc .NavFrame { 边距底部：-23px； } .tt按钮{ 边框半径：2px；左：114px；顶部：200px； padding-right: 5px;左填充：5px；显示：无；位置：固定；变换：旋转（90度）；背景颜色：rgb(173, 173, 173); -moz 变换：旋转（90 度）； -webkit-transform：旋转（90度）； -o-变换：旋转（90度）； } .wikia 菜单按钮 { 显示：无！重要； } :first-of-type.portlet > .pBody > ul > li:not([id]) { 显示：无！重要； }

Answer 1

不要修改 head 标签，而是通过 DOM api 来完成。 This 页面应该会有所帮助。