JavascriptでCSSファイルを動的に参照する2つの方法を紹介_基礎知識

私は最近、スタイルを動的に挿入するために JavaScript を必要とするプロジェクトに取り組みましたが、以前の方法は失敗しました。 2時間もチェックした理由は私の手が悪いことが判明しました。これについては最後にお話しましょう。

JavaScript 挿入スタイルは、フロントエンド開発、特にフロントエンドのパフォーマンスやページ スキニングを変更する場合に広く使用されています。私が最近行ったタスクは、ユーザーが他の人のサイトのボタンをクリックすると、他のサイトのページにスクリプトが挿入されて実行されるというものでした。これにはスタイルの挿入も含まれます。

一般に、JavaScript の動的挿入スタイルには 2 つのタイプがあります。1 つは、

内の タグを使用して外部スタイル ファイルを導入する方法です。 ; style> タグはページのスタイルを挿入します (これは style 属性ではありません)。

1. ページに外部スタイルを導入します:

で タグを使用して、外部スタイル ファイルを導入します。

コードをコピーします コードは次のとおりです:

function includeLinkStyle(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}

includeLinkStyle("http://css.jb51.net/home/css/reset.css?v=20101227");

ただし、現在取り組んでいるプロジェクトでは、適用されているスタイルがほとんどないため、外部スタイル ファイルを直接導入するのは不適切と思われるため、

2. このメソッドには、さまざまな主流ブラウザーで互換性の問題があります。Firefox などの標準ブラウザーでは、styleSheet を設定するための cssText 値を直接取得できません。スタイルを個別に使用します: document.styleSheets[0].cssRules[0].cssText=newcssText; ページはスタイルを自動的に更新しません。document.styleSheets[0].cssRules[0].style.cssText を使用する必要があります。 = newcssText; これは不正な IE ほど使いやすく単純ではないようです。 YUI では、次のような優れたメソッドが使用されます。 style.appendChild(document.createTextNode(styles)); createTextNode を使用して、

タグにスタイル文字列を追加します。

コードをコピーします コードは次のとおりです:

関数 includeStyleElement(styles, styleId) {

if (document.getElementById(styleId)) {

return

}
var style = document.createElement("style");
style.id = styleId;
// IE には次の属性を設定するのが最善です。
/*if (isIE()) {
style.type = "text/css";
style.media = "screen"
}* /
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //for ie
style.styleSheet.cssText = style;
} else { //w3c の場合
style.appendChild(document.createTextNode(styles));
}
}
varstyles = "#div{背景色: # FF3300; color:#FFFFFF }";
includeStyleElement(styles, "newstyle");

このようにして、要素がスクリプトを通じて追加されたかどうかに関係なく、ページ上の要素にスタイルを直接適用できます。

手について:

このコードを見てください:

コードをコピーします コードは次のとおりです:

var divObj = document.createElement("div");divObj.id = "__div";

divObj.innerHTML = "DOM とスタイルを挿入する js のテスト";
document.body. appendChild (divObj);

var style = "#__div{background-color: #FF3300; color:#FFFFFF }";

includeStyleElement(styles, "newstyle");

前述したように、このプロジェクトでは、ユーザーが他のサイトのボタンをクリックすると、他のサイトのページにスクリプトが挿入されて実行されます。これには、スタイルの挿入も含まれます。要素 ID は一意です。競合を避けるため、要素 ID の前にプライベート性を示す「__」を追加します。結果は悲劇的です。IE6 と IE7 のクラス名と ID はアンダースコア ("_") で始めることができません。これを忘れていました。原因を調べるのに2時間もかかりました。何という悲劇でしょう！結論を出してください！フロントエンドの作業を行う場合、安っぽくならないようにしてください。