動態加載的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); 
} 

當我使用DOM資源管理器在Visual Studio來看看加載了什麼，我只看到我的期望，在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頁面應該會有所幫助。