最近、私はプロジェクトに取り組んでいて、スタイルを動的に挿入するためにJavaScriptが必要でしたが、以前の方法は失敗しました！私が2時間チェックした理由は、私がふしだらな人だったからです。最後にこれについて話しましょう！
JavaScriptの挿入スタイルは、特にフロントエンドのパフォーマンスとページスキンを変更する場合、フロントエンド開発で広く使用されています。私が最近行ったタスクは、ユーザーが別のサイトのボタンをクリックし、別のサイトページの下にスクリプトを挿入して、スタイル挿入を含む実行を実行することです。
一般的に言えば、JavaScriptには2種類の動的挿入スタイルがあります。 1つは、ページに外部スタイルを導入し、<head>の<link>タグを使用して外部スタイルファイルを導入することです。もう1つは<style>タグを使用してページスタイルを挿入することです（ここに記載されているものはスタイル属性ではありません）。
1.ページに外部スタイルを紹介します。
<link>タグを<head>に使用して外部スタイルファイルを導入すると、これは比較的簡単であり、各主流ブラウザに互換性の問題はありません。
コードコピーは次のとおりです。
関数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.vevb.com/home/css/reset.css?v=20101227"）;
ただし、私が現在行っているプロジェクトでは、単独で適用されるスタイルはほとんどありません。外部スタイルファイルを直接導入することは不適切であるように思われるため、<style>タグを使用してページにページスタイルを挿入することを選択しました。
2。<style>タグを使用してページスタイルを挿入します。
この方法には、さまざまな主流のブラウザに互換性の問題があります。 Firefoxなどの標準的なブラウザは、StyleSheetのCSSTEXT値を直接取得できません。標準のブラウザでは、document.stylesheets [0] .cssrules [0] .csstextのみを使用して、スタイルを個別に取得できます。同時に使用：document.stylesheets [0] .cssrules [0] .csstext = newcsstext;ページはスタイルを自動的に更新しません。Document.stylesheets[0] .cssrules [0] .style.csstext = newcsstext;を使用する必要があります。これは人間化されたものではなく、使いやすいようです。 Yui：style.appendChild（document.createTextNode（styles））で適切な方法が使用されています。 createTextNodeを使用して、<style>タグにスタイル文字列を追加します。
コードコピーは次のとおりです。
function includestesteseleelement（style、styleid）{
if（document.getElementById（styleid））{
戻る
}
var style = document.createelement（ "style"）;
style.id = styleid;
//ここでIEの次のプロパティを設定するのが最善です
/*if（isie（））{
style.type = "text/css";
style.media = "スクリーン"
}*/
（document.getElementsByTagname（ "head"）[0] || document.body）.appendChild（style）;
if（style.stylesheet）{// ieの場合
style.stylesheet.csstext = styles;
} else {// w3cの場合
style.appendChild（document.createTextNode（styles））;
}
}
var styles = "#div {background-color：＃ff3300; color：#fffff}";
includeTyleElement（スタイル、 "NewStyle"）;
このようにして、要素がスクリプトを介して追加されるかどうかに関係なく、ページ内の要素をスタイルに直接適用できます。
愚かな手について：
このコードを見てください：
コードコピーは次のとおりです。
var divobj = document.createelement（ "div"）;
divobj.id = "__div";
divobj.innerhtml = "js insert dom and style"をテストします ";
document.body.appendChild（divobj）;
var styles = "#__ div {background-color：＃ff3300; color：#fffff}";
includeTyleElement（スタイル、 "NewStyle"）;
前述のように、このプロジェクトは、ユーザーが別のサイトのボタンをクリックし、別のサイトページの下にスクリプトを挿入して実行するときです。これには、スタイルの挿入が含まれます。可能な限り作成した要素IDの独自性を確保するために、要素IDの前に「__」を追加して、紛争に対する私的保護を示しました。その結果、悲劇が引き起こされました。 IE6、IE7クラス、およびIDの命名は、アンダースコア（ "_"）から始めることができず、実際にこれを忘れました！理由を見つけるのに2時間かかりました。それは悲劇です！結論を描く！フロントエンドをするときは安くはありません！