CSS cargado dinámicamente que no tiene ningún efecto en una aplicación de Windows 8

4

Cargué dinámicamente un archivo CSS y lo coloqué dentro de una styleetiqueta en una aplicación de Windows 8.

Así es como cargo el 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);
}

Cuando utilizo DOM Explorer en Visual Studio para ver lo que se carga, veo exactamente lo que espero, la etiqueta final en el headque stylecontiene mi CSS.

Sin embargo, cuando veo mi página, no entra en vigor ninguno de los CSS que se cargan.

Probé esto agregando otra styleetiqueta manualmente en la fuente HTML, y eso tuvo efecto, pero la dinámica no lo hizo.

¿Cómo puedo hacer que este CSS tenga efecto?

Aquí está la etiqueta de estilo generada:

 #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;
}

2
  • Sería de gran ayuda si nos mostrara la etiqueta de estilo generada. 16/12/12 a las 12:21
  • Ahh, disculpas, a primera vista sonaba como si simplemente estuvieras tratando de incluir un CSS externo en la cabeza. 16/12/12 a las 12:31
2

En lugar de modificar la etiqueta principal, hágalo a través de la API DOM. Esta página debería ser útil.

3
  • Gracias por la respuesta. ¡Sin JavaScript runtime error: Not enough storage is available to complete this operation.embargo, obtuve un error al intentar esto!
    ACarter
    16/12/12 a las 18:29
  • 2
    ¿Es esta publicación alguna ayuda? 17/12/12 a las 1:58
  • Sí, el uso d.createStyleSheet().cssText = ...resolvió el problema. ¡Gracias!
    ACarter
    17/12/12 a las 17:26