JavaScript 挿入スタイルの実装コード_javascript スキル-jsチュートリアル-php.cn

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

一般に、JavaScript の動的挿入スタイルには 2 つのタイプがあります。1 つは の タグを使用して外部スタイルを導入する方法です。ページに外部スタイル ファイルを導入するには、 タグを使用します (これは style 属性ではありません)。 1. ページに外部スタイルを導入します。

外部スタイル ファイルを導入するには、比較的単純です。性的な問題:

コードをコピーします

コードは次のとおりです: function includeLinkStyle( url) { var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; ; ドキュメント.getElementsByTagName("head")[0].appendChild(link); includeLinkStyle("http://css.jb51.net/home/css/reset.css?v) =20101227"); しかし、現在取り組んでいるプロジェクトでは、適用されているスタイルがほとんどありません。外部スタイル ファイルを直接導入するのは適切ではないと思われるため、2 番目のオプションを選択しました。 タグを使用すると、ページ スタイルが挿入されます。 2. タグを使用してページ スタイルを挿入します。 このメソッドには、Firefox などのさまざまな標準ブラウザーでは、styleSheet を設定する cssText を直接取得できません。 .value、標準ブラウザでは、document.styleSheets[0].cssRules[0].cssText を使用してスタイルを同時に取得できます。document.styleSheets[0].cssRules[0].cssText= を使用します。 newcssText; ページは自動的に更新されません。スタイルについては、 document.styleSheets[0].cssRules[0].style.cssText=newcssText; を使用する必要があります。 YUI では、次のような優れたメソッドが使用されます。コードをコピーします コードは次のとおりです。

このようにして、要素がスクリプトを通じて追加されたかどうかに関係なく、スタイルをページ上の要素に直接適用できます。 手の安さについて: このコードを見てください: コードをコピーします コードは次のとおりです:

var divObj = document.createElement("div"); divObj .id = "__div"; divObj .innerHTML="DOM とスタイルを挿入するための js をテストします"; document.body.appendChild (divObj ); varstyles = "#__div{background-color: #FF3300; color:#FFFFFF }"; includeStyleElement(styles,"newstyle"); > front このプロジェクトで述べたように、ユーザーが他のサイトのボタンをクリックすると、一意性を確保するために、他のサイトのページにスクリプトが挿入されて実行されます。可能な限り私が作成した要素 ID の中で、競合を避けるために、要素 ID の前に非公開を示す「__」を手作業で追加しました。結果は悲劇的です。IE6 と IE7 のクラス名と ID はアンダースコア ("_") で始めることができません。これを忘れていました。原因を調べるのに2時間もかかりました。何という悲劇でしょう！結論を出してください！