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 サイトの他の関連記事を参照してください。