4

CSSファイルを動的にロードstyleし、Windows8アプリのタグ内に配置しました。

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

VisualStudioでDOMExplorerを使用して何がロードされているかを確認すると、期待どおりの結果が正確にわかります。最後のタグは、CSSを含んでいますhead。style

ただし、自分のページを表示すると、読み込まれたCSS以外が有効になります。

HTMLソースに手動で別のstyleタグを追加してこれをテストしましたが、効果はありましたが、動的なタグは効果がありませんでした。

このCSSに効果を持たせるにはどうすればよいですか？

生成されるスタイルタグは次のとおりです。

 ＃p-cactions ul li {
}
＃p-cactions ul li a {
}
 ＃コンテンツ {
}
 体 {
    背景：rgb（244、248、255）;
}
 div.tleft {
    ボーダー：currentColor;
}
 div.tright {
    マージン左：13px;
}
 .content-bg {
    背景：白;
}
pre {
    オーバーフロー：自動;
}
.pBody {
    背景色：rgb（222、227、232）;
}
体 {
     背景：＃103A5A url（http://images2.wikia.nocookie.net/lego/images/f/f0/Studs-tile.png）;
}
＃p-personal li a {
     色：＃DEE3E8;
}
.portlet h5 {
     色：#FFFFFF; 表示ブロック; 高さ：15px; 背景色：＃355C70; text-transform：大文字;
}
body [class * ='ns-118'] {
}
body [class * ='ns-119'] {
}
body [class * ='ns-118']＃p-personal li a {
     色：＃DEE8E3;
}
body [class * ='ns-119']＃p-personal li a {
     色：＃DEE8E3;
}
body [class *='ns-118']。portleth5{
     色：#FFFFFF; 表示ブロック; 高さ：15px; 背景色：＃35705C; text-transform：大文字;
}
body [class *='ns-119']。portleth5{
     色：#FFFFFF; 表示ブロック; 高さ：15px; 背景色：＃35705C; text-transform：大文字;
}
body [class * ='ns-116'] {
}
body [class * ='ns-117'] {
}
body [class * ='ns-116']＃p-personal li a {
     色：＃E8DEE3;
}
body [class * ='ns-117']＃p-personal li a {
     色：＃E8DEE3;
}
body [class *='ns-116']。portleth5{
     色：#FFFFFF; 表示ブロック; 高さ：15px; 背景色：＃90152C; text-transform：大文字;
}
body [class *='ns-117']。portleth5{
     色：#FFFFFF; 表示ブロック; 高さ：15px; 背景色：＃90152C; text-transform：大文字;
}
body [class * ='Forum_Brickiforums'] {
}
body [class * ='Forum_Brickiforums']＃p-personal li a {
     色：＃E8DEE3;
}
body [class *='Forum_Brickiforums']。portleth5{
     色：#FFFFFF; 表示ブロック; 高さ：15px; 背景色：＃B0B02C; text-transform：大文字;
}
＃title-rating2 {
     表示：なし;
}
#footer {
     背景：＃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; ボーダー：currentColor; 幅：100％;
}
.infoboxtoc #toctitle {
    表示：なし;
}
.infoboxtoc .NavHead {
    パディング-右：2px; パディング-下：12px; フロート：右;
}
.infoboxtoc .NavFrame {
    マージンボトム：-23px;
}
.ttbutton {
    border-radius：2px; 左：114px; 上：200px; パディング-右：5px; パディング-左：5px; 表示：なし; 位置：固定; 変換：rotate（90deg）; 背景色：rgb（173、173、173）; -moz-transform：rotate（90deg）; -webkit-transform：rotate（90deg）; -o-transform：rotate（90deg）;
}
.wikia-menu-button {
    表示：なし！重要;
}
：first-of-type.portlet> .pBody> ul> li：not（[id]）{
    表示：なし！重要;
}
4

1 に答える 1

2

headタグを変更する代わりに、DOMAPIを介して変更します。このページは役立つはずです。

于 2012-12-16T18:06:51.343 に答える