4

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

这是我加载 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 资源管理器查看加载的内容时，我看到的正是我所期望的，最后一个标签head是style包含我的 CSS 的。

但是，当我查看我的页面时，加载的 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]) {
    显示：无！重要；
}
4

1 回答 1

2

无需修改 head 标签，而是通过 DOM api 进行。这个页面应该很有帮助。

于 2012-12-16T18:06:51.343 回答