javascript_javascript ヒントを使用してスタイルを挿入する-jsチュートリアル-php.cn

1. JavaScript を使用して スタイル を挿入します。 場合によっては、js を使用してページの style タグに CSS コードを動的に生成する必要があることがあります。この方法は非常に簡単です。つまり、style 要素を直接作成し、その CSS コードを style 要素に設定して、最後にそれを に挿入します。ヘッド要素。

しかし、解決しなければならない互換性の問題がいくつかあります。まず、w3c 標準に準拠したブラウザでは、style 要素にテキスト ノードとして挿入する CSS コードを挿入するだけで済みます。IE では、style 要素の styleSheet.cssText を使用して解決する必要があります。問題。

IE の一部のバージョンでは、ページ上のスタイル タグの数が制限されているため、それを超えるとエラーが報告されることにも注意してください。

function addCSS(cssText){ var style = document.createElement('style'), //创建一个style元素 head = document.head || document.getElementsByTagName('head')[0]; //获取head元素 style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用 if(style.styleSheet){ //IE var func = function(){ try{ //防止IE中stylesheet数量超过限制而发生错误 style.styleSheet.cssText = cssText; }catch(e){

} } //如果当前styleSheet还不能用，则放到异步中则行 if(style.styleSheet.disabled){ setTimeout(func,10); }else{ func(); } }else{ //w3c //w3c浏览器中只要创建文本节点插入到style元素中就行了 var textNode = document.createTextNode(cssText); style.appendChild(textNode); } head.appendChild(style); //把创建的style元素插入到head中 }

//使用 addCSS('#demo{ height: 30px; background:#f00;}'); ログイン後にコピー もちろん、これは最も基本的なデモ方法であり、実際のアプリケーションでは、スタイル要素の数がスタイルシートの数を超えないように、毎回生成される CSS コードを挿入するなど、改善する必要があります。 IEの制限が間違っています。

パッケージ:

コードをコピー コードは次のとおりです。 var importStyle=function importStyle(b){var a= document.createElement ("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a.appendChild (c.createTextNode(b))}}; importStyle('h1 {background: red; }');// を呼び出す

seajs パッケージ

コードをコピー コードは次のとおりです。 seajs.importStyle=function importStyle(b){var a =document.createElement("style"),c=document;c.getElementsByTagName("head")[0].appendChild(a);if(a.styleSheet){a.styleSheet.cssText=b}else{a. appendChild(c .createTextNode(b))}}; 2. JavaScript の挿入 で タグを使用して外部スタイル ファイルを導入します。

との互換性の問題はありません。 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.xxx.com/home/css/reset.css?v=20101227”); ログイン後にコピー 以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。