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

Javascript 动态加载的CSS在Windows 8应用程序中无效,javascript,css,windows-8,windows-store-apps,Javascript,Css,Windows 8,Windows Store Apps,我已经动态加载了一个CSS文件,并将其放置在Windows8应用程序中的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, xhrEr

我已经动态加载了一个CSS文件,并将其放置在Windows8应用程序中的
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);
}
当我在VisualStudio中使用DOM资源管理器查看加载的内容时,我准确地看到了我期望的内容,
头中的最后一个标记是包含CSS的
样式

然而,当我查看我的页面时,加载的CSS中的任何一个都会生效

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

如何使这个CSS产生效果

以下是生成的样式标记:

#p-cactions ul li { } #p-cactions ul li a { } #content { } body { background: rgb(244, 248, 255); } div.tleft { border: currentColor; } div.tright { margin-left: 13px; } .content-bg { background: white; } pre { overflow: auto; } .pBody { background-color: rgb(222, 227, 232); } body { background: #103A5A url(http://images2.wikia.nocookie.net/lego/images/f/f0/Studs-tile.png); } #p-personal li a { color: #DEE3E8; } .portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #355C70; text-transform: Capitalize; } body[class*='ns-118'] { } body[class*='ns-119'] { } body[class*='ns-118'] #p-personal li a { color: #DEE8E3; } body[class*='ns-119'] #p-personal li a { color: #DEE8E3; } body[class*='ns-118'].portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #35705C; text-transform: Capitalize; } body[class*='ns-119'].portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #35705C; text-transform: Capitalize; } body[class*='ns-116'] { } body[class*='ns-117'] { } body[class*='ns-116'] #p-personal li a { color: #E8DEE3; } body[class*='ns-117'] #p-personal li a { color: #E8DEE3; } body[class*='ns-116'].portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #90152C; text-transform: Capitalize; } body[class*='ns-117'].portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #90152C; text-transform: Capitalize; } body[class*='Forum_Brickiforums'] { } body[class*='Forum_Brickiforums'] #p-personal li a { color: #E8DEE3; } body[class*='Forum_Brickiforums'].portlet h5 { color: #FFFFFF; display: block; height: 15px; background-color: #B0B02C; text-transform: Capitalize; } #title-rating2 { display: none; } #footer { background: #DEE3E8; border-color: #355C70; } .wikiaOnly { display: none; } div.User-help-badge-1 { left: 500px; top: 2px; position: absolute; } div.User-help-badge-2 { left: 540px; top: 2px; position: absolute; } div.User-help-badge-3 { left: 580px; top: 2px; position: absolute; } div.User-help-badge-4 { left: 620px; top: 2px; position: absolute; } div.User-help-badge-5 { left: 660px; top: 2px; position: absolute; } .infoboxtoc .toc { margin: 0px; padding: 0px; border: currentColor; width: 100%; } .infoboxtoc #toctitle { display: none; } .infoboxtoc .NavHead { padding-right: 2px; padding-bottom: 12px; float: right; } .infoboxtoc .NavFrame { margin-bottom: -23px; } .ttbutton { border-radius: 2px; left: 114px; top: 200px; padding-right: 5px; padding-left: 5px; display: none; position: fixed; transform: rotate(90deg); background-color: rgb(173, 173, 173); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); } .wikia-menu-button { display: none !important; } :first-of-type.portlet > .pBody > ul > li:not([id]) { display: none !important; } #p-Cacul-li{ } #p-cactions ul li a{ } #内容{ } 身体{ 背景:rgb(244248255); } 特莱夫特分区{ 边框:当前颜色; } 三角区{ 左边距:13px; } .内容背景{ 背景:白色; } 前{ 溢出:自动; } pBody先生{ 背景色:rgb(222227232); } 身体{ 背景:#103A5A url(http://images2.wikia.nocookie.net/lego/images/f/f0/Studs-tile.png); } #私人李安{ 颜色:#DEE3E8; } .h5{ 颜色:#FFFFFF;显示:块;高度:15px;背景色:#355C70;文本转换:大写; } 正文[类别*='ns-118']{ } 正文[类别*='ns-119']{ } 主体[类别*=“ns-118”]#p-a{ 颜色:#DEE8E3; } 主体[类别*='ns-119']#p-a{ 颜色:#DEE8E3; } 正文[class*='ns-118'].portlet h5{ 颜色:#FFFFFF;显示:块;高度:15px;背景色:#35705C;文本转换:大写; } 正文[class*='ns-119'].portlet h5{ 颜色:#FFFFFF;显示:块;高度:15px;背景色:#35705C;文本转换:大写; } 正文[类别*='ns-116']{ } 正文[类别*='ns-117']{ } 主体[类别*='ns-116']#p-a{ 颜色:#E8DEE3; } 主体[类别*='ns-117']#p-a{ 颜色:#E8DEE3; } 正文[class*='ns-116'].portlet h5{ 颜色:#FFFFFF;显示:块;高度:15px;背景色:#90152C;文本转换:大写; } 正文[class*='ns-117'].portlet h5{ 颜色:#FFFFFF;显示:块;高度:15px;背景色:#90152C;文本转换:大写; } 正文[类别*=“论坛”]{ } 正文[类别*=“论坛”]#p-个人李a{ 颜色:#E8DEE3; } 正文[类*=“论坛”]。portlet h5{ 颜色:#FFFFFF;显示:块;高度:15px;背景色:#B0B02C;文本转换:大写; } #产权评级2{ 显示:无; } #页脚{ 背景:DEE3E8;边框颜色:355C70; } wikiaOnly先生{ 显示:无; } 部门用户-帮助-徽章-1{ 左:500px;顶部:2px;位置:绝对; } 部门用户-帮助-徽章-2{ 左:540像素;顶部:2像素;位置:绝对; } 部门用户-帮助-徽章-3{ 左:580像素;顶部:2像素;位置:绝对; } 部门用户-帮助-徽章-4{ 左:620px;顶部:2px;位置:绝对; } 部门用户-帮助-徽章-5{ 左:660像素;顶部:2像素;位置:绝对; } .infoboxtoc.toc{ 边距:0px;填充:0px;边框:currentColor;宽度:100%; } .infoboxtoc#toc title{ 显示:无; } .infoboxtoc.NavHead{ 右侧填充:2px;底部填充:12px;浮动:右侧; } .infoboxtoc.NavFrame{ 边缘底部:-23px; } .tt按钮{ 边框半径:2px;左侧:114px;顶部:200px;右侧填充:5px;左侧填充:5px;显示:无;位置:固定;变换:旋转(90度);背景颜色:rgb(173173173);-moz变换:旋转(90度);-webkit变换:旋转(90度);-o变换:旋转(90度); } .wikia菜单按钮{ 显示:无!重要; } :first-of-type.portlet>.pBody>ul>li:not([id]){ 显示:无!重要; }
不要修改head标记,而是通过domapi进行修改。页面应该会有帮助。

如果您向我们展示生成的样式标签,这将非常有帮助。啊,抱歉,乍一看,听起来您只是想在头部添加一个外部css。谢谢您的回复。我遇到一个
JavaScript运行时错误:没有足够的存储空间来完成此操作。
尝试此操作时出错!发布任何帮助吗?是的,使用
d.createStyleSheet().cssText=…
解决了问题。谢谢