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

Posted 2023-03-29

【中文标题】动态加载的 CSS 在 Windows 8 应用程序中无效

【英文标题】：Dynamically loaded CSS having no effect in a Windows 8 app

【发布时间】：2012-12-03 18:34:31

【问题描述】：

我已经动态加载了一个 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]) 显示：无！重要；

【问题讨论】：

如果您向我们展示生成的样式标签将有很大帮助。

啊抱歉，乍一看，您似乎只是想在头部包含一个外部 css。

【参考方案1】：

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

【讨论】：

感谢您的回复。我在尝试这个时遇到了javascript runtime error: Not enough storage is available to complete this operation. 错误！

this 有帮助吗？

是的，使用d.createStyleSheet().cssText = ... 解决了这个问题。谢谢！