CSSスタイルシートファイルを動的に追加するJS関数_基礎知識

まず関数を与えます。

コードをコピー コードは次のとおりです。

varaddSheet=function(){
vardoc,cssCode ;
if(arguments.length==1){
doc=document;
cssCode=arguments[0]
}elseif(arguments.length==2){
doc=arguments [0];
cssCode=arguments[1];
alert("addSheet 関数は最大 2 つのパラメータを受け入れます!"); "v1" ){//自動変換透明機能を追加します。ユーザーは W3C 透明スタイルを入力するだけで、IE の透明フィルター
vart=cssCode.match(/opacity:(d?. d );/) ;
if(t!=null){
cssCode=cssCode.replace(t[0],"filter:alpha(opacity=" parseFloat(t[1])*100 ") ")
}
}
cssCode=cssCode " ";//firebug で見やすくするために最後に改行文字を追加します。
varheadElement=doc.getElementsByTagName("head")[0];
varstyleElements=headElement.getElementsByTagName("style");
if(styleElements.length==0){// スタイルが一致しない場合要素が作成されます
if(doc.createStyleSheet){//ie
doc.createStyleSheet();
}else{
vartempStyleElement=doc.createElement('style');//w3c
tempStyleElement.setAttribute("type","text/css");
headElement.appendChild(tempStyleElement);
}
}
varstyleElement=styleElements[0]; styleElement .getAttribute("media");
if(media!=null&&!/screen/.test(media.toLowerCase())){
styleElement.setAttribute("media","screen"); 🎜 >}
if(styleElement.styleSheet){//ie
styleElement.styleSheet.cssText =cssCode;
}elseif(doc.getBoxObjectFor){
styleElement.innerHTML =cssCode;//Firefoxサポート スタイル シート文字列を innerHTML に直接追加します。
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}


場合によっては、 add .js このファイルは、ドキュメントにいくつかの CSS スタイルを動的に導入します。一部の短い CSS コードの場合、

などのスタイル メソッドを呼び出すことができます。コードは次のとおりです。次のように:

varddd=document.getElementById("ddd"); ddd.style.border="1pxsolidred"; 関係ありませんそれより長い場合:

コードをコピー

コードは次のとおりです:

varddd=document.getElementById ("ddd"); ddd.style.cssText="border:1pxsolidred;color:#000;background:#444;float:left"; 個人的には後者が好きです。前者には深刻な互換性の問題があるためです。たとえば、Float スタイルは IE では styleFloat、Firefox などの W3C 標準ブラウザでは cssFloat です。そして cssText はユニバーサルです。 非常に長い場合は、CSS ファイルを動的にインポートできます。たとえば、

コードをコピーします

コードは次のとおりです。

functionaddSheetFile(path){ varfileref=document .createElement("link") fileref.rel="stylesheet"; fileref.href=path; media="screen" ; varheadobj=document.getElementsByTagName('head')[0]; headobj.appendChild(fileref)

}

IEでは少し面倒です。私は常に、サポートされているブラウザのネイティブ関数を使用してきましたが、バイナリ コードを直接使用するのが最も効率的です。




コードをコピー


コードは次のとおりです。

varoStylesheet=document.createStyleSheet(sURL,iIndex) );

createStyleSheet の 2 つのパラメーターはオプションです。
しかし、スタイルが特定のページに固有で管理者のみが使用でき、ページのその部分が動的に生成される場合、最初からそれを導入する必要があるでしょうか?ロードするには特別なファイルを作成する必要がありますか?最善の方法は、これらのスタイルを動的スクリプトにバンドルすることです。この機能はこの目的のために開発されました。
率直に言って、これは元々リッチテキストエディター用に開発されました。ご存知のとおり、リッチ テキスト入力ボックスを使用する最も一般的な方法は、入力するコンテンツを iframe に配置することです。これには、メイン ページのドキュメントとドキュメントの 2 種類のドキュメントが必要です。 iframe の。 iframe のドキュメントには互換性の問題もあります。
variframe=document.createElement('iframe');// 編集用のリッチテキストエディタを生成します
variframeDocument=iframe.contentDocument||iframe.contentWindow.document;
.... そうですね、遠すぎます。全体として、関数の最初の判断はこれら 2 つの文書に対して準備されています。 iframe が関与していない場合は、パラメーターを 1 つ渡すだけで済みます。最後のパラメータは常に CSS 文字列です。
次に、styleSheet 要素を動的に生成し、この要素に CSS 文字列を追加するという問題があります。もちろん、現段階で存在する場合は既製品を使用してください。 DOM 要素が増えると、ブラウザの負担も大きくなります。 document.styleSheets メソッドを考えます。これはスタイル要素やリンク要素を含むコレクションを返します。また、次のような互換性の問題も伴います。

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

"http://www.w3.org/TR/xhtml1/DTD /xhtml1-transitional.dtd">
<%# IE8 に IE7 のように Web ページを表示させる -%>

<%# --デフォルトでは、すべてのリンクがこのウィンドウで開かれます-%>