4
votes

I have dynamically loaded a CSS file, and placed it inside a style tag in a Windows 8 app.

Here's how I load the 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);
}

When I use the DOM Explorer in Visual Studio to look at what is loaded, I see exactly what I expect, the final tag in the head being a style containing my CSS.

However, when I view my page, non of the CSS that is loaded comes into affect.

I tested this by adding another style tag manually into the HTML source, and that had effect, but the dynamic one didn't.

How can I make this CSS have an effect?

Here is the style tag generated:


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

1
It would help greatly if you show us the generated style tag.Tim Joyce
Ahh apologies, at first glance it sounded like you were simply trying to include an external css into the head.Tim Joyce

1 Answers

2
votes

Instead of modifying the head tag, do it through the DOM api. This page should be helpful.