ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して 2 つの方法で CSS コードを動的に生成する方法の詳細を詳しく紹介します。
この記事では、主に javascript CSS コードを動的に生成する 2 つの方法を紹介します。場合によっては、ページ上のスタイル タグで CSS コードを動的に生成するために js を使用する必要がある場合があります。参考までに、この 2 つの方法を紹介します。
JavaScriptでCSSコードを動的に生成する2つの方法
場合によっては、jsを使用してページのスタイルタグにCSSコードを動的に生成する必要がある場合があります。この方法は非常に簡単です。つまり、スタイル要素を直接作成してから設定します。 style 要素 内部の CSS コードは、最終的に head 要素に挿入されます。ただし、解決する必要がある互換性の問題がいくつかあります。まず、w3c規格に準拠したブラウザでは、style要素に挿入するCSSコードをテキストノードとして挿入するだけで済みます。IEではstyle要素のstyleSheet.cssTextを使用するだけです。この問題を解決するために。 IE の一部のバージョンでは、ページ上のスタイル タグの数が制限されているため、それを超えるとエラーが報告されることにも注意してください。
方法 1:
0c1c5a64e17b6dfe42b59c3563e43ede タグに ID 名を追加し、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに
var oCss=document.getElementById("css"); oCss.innerHTML+="#box{width:200px;}";
を記述してスタイルを追加します。
方法 2:
場合によっては、js を使用して、ページ上の style タグに CSS コードを動的に生成する必要があります。この方法は非常に簡単です。つまり、スタイル要素を直接作成し、CSS コードを設定します。 style 要素を追加し、最後に head 要素に挿入します。ただし、解決する必要がある互換性の問題がいくつかあります。まず、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の制限が間違っています。
概要: 上記の方法で多くの問題を解決できます。ご不明な点がございましたら、ご連絡ください。
以上がJavaScript を使用して 2 つの方法で CSS コードを動的に生成する方法の詳細を詳しく紹介します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。