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

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

我通过将另一个 style 标签手动添加到 HTML 源代码中进行了测试，这产生了效果，但动态标签没有。

如何让这个 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;}

Answer 1

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