JavaScriptでCSSクラスを動的に作成して適用する方法は?


299

JavaScriptでCSSスタイルシートクラスを動的に作成し、div、table、span、trなどのHTML要素や、asp:Textbox、Dropdownlist、datalistなどのコントロールに割り当てる必要があります。

出来ますか?

サンプルでいいですね。


2
見てみましょうgithub.com/Box9/jss
jedierikb

回答:


394

JavaScriptを使用してCSSクラスを作成する理由がわかりませんが、ここにオプションがあります。

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('someElementId').className = 'cssClass';

10
私の使用例は、QAの目的で特定の要素を強調しているブックマークレットです。
TomG

25
これにより、IE 8以下で不明なランタイムエラーが発生することを確認してください。
Andy Hume

1
私の使用例は、ランダムなGoogle Webフォントをロードしてから、randomFontクラスにfont-family :-)を与えることです
w00t

26
別の使用例は、CSSファイルに依存しない単一のJS libが必要な場合です。私の場合、軽量のうなり声スタイルのアラートポップアップをすぐに使用したいです。
xeolabs 2013

1
私はw00tのような同様のことをしています。私はキャンバスに書き込む必要があるインタラクティブなhtml5アプリに取り組んでおり、ユーザーが使用するフォントを幅広い範囲から選択できるようにしたいと考えています。すべてのフォントを含むcssを用意するのではなく、フォントデータをアップロードするだけのバックエンドを作成することを計画しています。プログラムが読み込まれるたびに、
Webサービス

117

すべてのブラウザ機能するより良いソリューションを見つけました
document.styleSheetを使用して、ルールを追加または置換します。受け入れられた回答は短くて便利ですが、これはIE8全体で機能します。

function createCSSSelector (selector, style) {
  if (!document.styleSheets) return;
  if (document.getElementsByTagName('head').length == 0) return;

  var styleSheet,mediaType;

  if (document.styleSheets.length > 0) {
    for (var i = 0, l = document.styleSheets.length; i < l; i++) {
      if (document.styleSheets[i].disabled) 
        continue;
      var media = document.styleSheets[i].media;
      mediaType = typeof media;

      if (mediaType === 'string') {
        if (media === '' || (media.indexOf('screen') !== -1)) {
          styleSheet = document.styleSheets[i];
        }
      }
      else if (mediaType=='object') {
        if (media.mediaText === '' || (media.mediaText.indexOf('screen') !== -1)) {
          styleSheet = document.styleSheets[i];
        }
      }

      if (typeof styleSheet !== 'undefined') 
        break;
    }
  }

  if (typeof styleSheet === 'undefined') {
    var styleSheetElement = document.createElement('style');
    styleSheetElement.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(styleSheetElement);

    for (i = 0; i < document.styleSheets.length; i++) {
      if (document.styleSheets[i].disabled) {
        continue;
      }
      styleSheet = document.styleSheets[i];
    }

    mediaType = typeof styleSheet.media;
  }

  if (mediaType === 'string') {
    for (var i = 0, l = styleSheet.rules.length; i < l; i++) {
      if(styleSheet.rules[i].selectorText && styleSheet.rules[i].selectorText.toLowerCase()==selector.toLowerCase()) {
        styleSheet.rules[i].style.cssText = style;
        return;
      }
    }
    styleSheet.addRule(selector,style);
  }
  else if (mediaType === 'object') {
    var styleSheetLength = (styleSheet.cssRules) ? styleSheet.cssRules.length : 0;
    for (var i = 0; i < styleSheetLength; i++) {
      if (styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) {
        styleSheet.cssRules[i].style.cssText = style;
        return;
      }
    }
    styleSheet.insertRule(selector + '{' + style + '}', styleSheetLength);
  }
}

関数は次のように使用されます。

createCSSSelector('.mycssclass', 'display:none');

2
IE8での動作を確認。Chromeで機能しないため、mediaType for-loop ifsに「styleSheet.cssRules [i] .selectorText &&」と「styleSheet.rules [i] .selectorText &&」を追加する必要がありました。定義されていません。
w00t

@ w00tコードを貼り付けるか、編集して機能させてください。
Hengjie 2013年

Chrome(バージョン34.0.1847.132)を開いて関数を貼り付けて実行しましたが、機能しませんでした:「TypeError:nullのプロパティ 'length'を読み取れません」開発者コンソールから作成しても機能しないのでしょうか?
dnuske 2014年

chrome(またはchromium)の一部のバージョンでは、インデックス0でのinsertRuleが許可されていません。これが修正です:styleSheet.insertRule(selector + "{" + style + "}"、styleSheet.cssRules.length);
dnuske 2014

1
@dnuske同じ問題が発生しました。styleSheet.cssRulesがnullと評価されることがわかります。私が使用した修正は、新しい変数を作成し、var styleSheetLength = styleSheet.cssRules ? styleSheet.cssRules.length : 0その使用法を関数の実装に置き換えることです。
Raj Nathani 2014

27

短い答えですが、これは「すべてのブラウザで」互換性があります(具体的には、IE8 / 7):

function createClass(name,rules){
    var style = document.createElement('style');
    style.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(style);
    if(!(style.sheet||{}).insertRule) 
        (style.styleSheet || style.sheet).addRule(name, rules);
    else
        style.sheet.insertRule(name+"{"+rules+"}",0);
}
createClass('.whatever',"background-color: green;");

そしてこの最後のビットはクラスを要素に適用します:

function applyClass(name,element,doRemove){
    if(typeof element.valueOf() == "string"){
        element = document.getElementById(element);
    }
    if(!element) return;
    if(doRemove){
        element.className = element.className.replace(new RegExp("\\b" + name + "\\b","g"));
    }else{      
        element.className = element.className + " " + name;
    }
}

こちらも小さなテストページです:https : //gist.github.com/shadybones/9816763

重要な点は、スタイル要素に「styleSheet」/「sheet」プロパティがあり、ルールを追加/削除するために使用できるという事実です。


これにより、クラスの作成ごとに新しい「スタイル」要素が作成されますか?したがって、データに基づいてforループで1000以上のクラスを作成する場合、これはdocument.head.appendChildを1000回適用する必要がありますか?
bluejayke

chrome style.sheetとstyle.styleSheetの私にとっては存在しません
bluejayke


7

YUIは、私が見た中で最高のスタイルシートユーティリティです。ぜひチェックしてみてください。

// style element or locally sourced link element
var sheet = YAHOO.util.StyleSheet(YAHOO.util.Selector.query('style',null,true));

sheet = YAHOO.util.StyleSheet(YAHOO.util.Dom.get('local'));


// OR the id of a style element or locally sourced link element
sheet = YAHOO.util.StyleSheet('local');


// OR string of css text
var css = ".moduleX .alert { background: #fcc; font-weight: bold; } " +
          ".moduleX .warn  { background: #eec; } " +
          ".hide_messages .moduleX .alert, " +
          ".hide_messages .moduleX .warn { display: none; }";

sheet = new YAHOO.util.StyleSheet(css);

ここで提案されているような、その場でスタイルを変更する他のはるかに簡単な方法があります。それらがあなたの問題にとって理にかなっているなら、それらは最善かもしれませんが、CSSを変更することがより良い解決策である理由は確かにあります。最も明白なケースは、多数の要素を変更する必要がある場合です。もう1つの主なケースは、カスケードを含めるためにスタイルの変更が必要な場合です。domを使用して要素を変更すると、常に優先度が高くなります。そのハンマーアプローチは、html要素でスタイル属性を直接使用するのと同じです。それが常に望ましい効果であるとは限りません。


5

IE 9以降、テキストファイルをロードして、style.innerHTMLプロパティを設定できるようになりました。したがって、基本的にはajaxを介してcssファイルをロードし(そしてコールバックを取得)、次のようにスタイルタグ内にテキストを設定するだけです。

これは他のブラウザでも機能しますが、どれくらい前かはわかりません。しかし、IE8をサポートする必要がない限り、それは機能します。

// RESULT: doesn't work in IE8 and below. Works in IE9 and other browsers.
$(document).ready(function() {
    // we want to load the css as a text file and append it with a style.
    $.ajax({
        url:'myCss.css',
        success: function(result) {
            var s = document.createElement('style');
            s.setAttribute('type', 'text/css');
            s.innerHTML = result;
            document.getElementsByTagName("head")[0].appendChild(s);
        },
        fail: function() {
            alert('fail');
        }
    })
});

そして、myCss.cssのような外部ファイルをプルすることができます

.myClass { background:#F00; }

5

ここにコメントでわずかに書き直されたVishwanathの解決策があります:

function setStyle(cssRules, aSelector, aStyle){
    for(var i = 0; i < cssRules.length; i++) {
        if(cssRules[i].selectorText && cssRules[i].selectorText.toLowerCase() == aSelector.toLowerCase()) {
            cssRules[i].style.cssText = aStyle;
            return true;
        }
    }
    return false;
}

function createCSSSelector(selector, style) {
    var doc = document;
    var allSS = doc.styleSheets;
    if(!allSS) return;

    var headElts = doc.getElementsByTagName("head");
    if(!headElts.length) return;

    var styleSheet, media, iSS = allSS.length; // scope is global in a function
    /* 1. search for media == "screen" */
    while(iSS){ --iSS;
        if(allSS[iSS].disabled) continue; /* dont take into account the disabled stylesheets */
        media = allSS[iSS].media;
        if(typeof media == "object")
            media = media.mediaText;
        if(media == "" || media=='all' || media.indexOf("screen") != -1){
            styleSheet = allSS[iSS];
            iSS = -1;   // indication that media=="screen" was found (if not, then iSS==0)
            break;
        }
    }

    /* 2. if not found, create one */
    if(iSS != -1) {
        var styleSheetElement = doc.createElement("style");
        styleSheetElement.type = "text/css";
        headElts[0].appendChild(styleSheetElement);
        styleSheet = doc.styleSheets[allSS.length]; /* take the new stylesheet to add the selector and the style */
    }

    /* 3. add the selector and style */
    switch (typeof styleSheet.media) {
    case "string":
        if(!setStyle(styleSheet.rules, selector, style));
            styleSheet.addRule(selector, style);
        break;
    case "object":
        if(!setStyle(styleSheet.cssRules, selector, style));
            styleSheet.insertRule(selector + "{" + style + "}", styleSheet.cssRules.length);
        break;
    }

4

あなたの仕事であなたを助けることができる興味深いプロジェクトはJSSです。

JSSはCSSよりも優れた抽象化です。JavaScriptを言語として使用して、宣言的で保守可能な方法でスタイルを記述します。これは、ブラウザーおよびサーバー側で実行時に機能する高性能JS to CSSコンパイラーです。

JSSライブラリでは、.attach()関数を使用してDOM / headセクションに挿入できます。

評価のためのReplオンライン版

JSSの詳細情報

例:

// Use plugins.
jss.use(camelCase())

// Create your style.
const style = {
  myButton: {
    color: 'green'
  }
}

// Compile styles, apply plugins.
const sheet = jss.createStyleSheet(style)

// If you want to render on the client, insert it into DOM.
sheet.attach()

3

グーグル閉鎖を使用して:

あなたは単にccsomモジュールを使うことができます:

goog.require('goog.cssom');
var css_node = goog.cssom.addCssText('.cssClass { color: #F00; }');

JavaScriptコードは、CSSノードをドキュメントヘッドに配置するときにクロスブラウザーになることを試みます。


3

https://jsfiddle.net/xk6Ut/256/

JavaScriptでCSSクラスを動的に作成および更新する1つのオプション:

  • スタイル要素を使用してCSSセクションを作成する
  • CSS
    クラスを更新できるようにスタイル要素にIDを使用する

.....

function writeStyles(styleName, cssText) {
    var styleElement = document.getElementById(styleName);
    if (styleElement) 
             document.getElementsByTagName('head')[0].removeChild(
        styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleName;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

...

    var cssText = '.testDIV{ height:' + height + 'px !important; }';
    writeStyles('styles_js', cssText)

1

答えに目を通すと、最も明白で簡単な方法がありdocument.write()ません。必要なCSSのチャンクを書き出すために使用します。

次に例を示します(codepenで表示:http : //codepen.io/ssh33/pen/zGjWga ):

<style>
   @import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
   .d, body{ font: 3vw 'Open Sans'; padding-top: 1em; }
   .d {
       text-align: center; background: #aaf;
       margin: auto; color: #fff; overflow: hidden; 
       width: 12em; height: 5em;
   }
</style>

<script>
   function w(s){document.write(s)}
   w("<style>.long-shadow { text-shadow: ");
   for(var i=0; i<449; i++) {
      if(i!= 0) w(","); w(i+"px "+i+"px #444");
   }
   w(";}</style>");
</script> 

<div class="d">
    <div class="long-shadow">Long Shadow<br> Short Code</div>
</div>

ページの読み込み後にCSSルールを作成する必要がある場合、またはXHTMLを使用している場合を除き、これは問題ありません。
Tim Down

1
function createCSSClass(selector, style, hoverstyle) 
{
    if (!document.styleSheets) 
    {
        return;
    }

    if (document.getElementsByTagName("head").length == 0) 
    {

        return;
    }
    var stylesheet;
    var mediaType;
    if (document.styleSheets.length > 0) 
    {
        for (i = 0; i < document.styleSheets.length; i++) 
        {
            if (document.styleSheets[i].disabled) 
            {
                continue;
            }
            var media = document.styleSheets[i].media;
            mediaType = typeof media;

            if (mediaType == "string") 
            {
                if (media == "" || (media.indexOf("screen") != -1)) 
                {
                    styleSheet = document.styleSheets[i];
                }
            } 
            else if (mediaType == "object") 
            {
                if (media.mediaText == "" || (media.mediaText.indexOf("screen") != -1)) 
                {
                    styleSheet = document.styleSheets[i];
                }
            }

            if (typeof styleSheet != "undefined") 
            {
                break;
            }
        }
    }

    if (typeof styleSheet == "undefined") {
        var styleSheetElement = document.createElement("style");
        styleSheetElement.type = "text/css";
        document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
        for (i = 0; i < document.styleSheets.length; i++) {
            if (document.styleSheets[i].disabled) {
                continue;
            }
            styleSheet = document.styleSheets[i];
        }

        var media = styleSheet.media;
        mediaType = typeof media;
    }

    if (mediaType == "string") {
        for (i = 0; i < styleSheet.rules.length; i++) 
        {
            if (styleSheet.rules[i].selectorText.toLowerCase() == selector.toLowerCase()) 
            {
                styleSheet.rules[i].style.cssText = style;
                return;
            }
        }

        styleSheet.addRule(selector, style);
    }
    else if (mediaType == "object") 
    {
        for (i = 0; i < styleSheet.cssRules.length; i++) 
        {
            if (styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) 
            {
                styleSheet.cssRules[i].style.cssText = style;
                return;
            }
        }

        if (hoverstyle != null) 
        {
            styleSheet.insertRule(selector + "{" + style + "}", 0);
            styleSheet.insertRule(selector + ":hover{" + hoverstyle + "}", 1);
        }
        else 
        {
            styleSheet.insertRule(selector + "{" + style + "}", 0);
        }
    }
}





createCSSClass(".modalPopup  .header",
                                 " background-color: " + lightest + ";" +
                                  "height: 10%;" +
                                  "color: White;" +
                                  "line-height: 30px;" +
                                  "text-align: center;" +
                                  " width: 100%;" +
                                  "font-weight: bold; ", null);

ドキュメントに現在のスタイルシートがない場合はどうなるのか
bluejayke

1

これが私のモジュラーソリューションです:

var final_style = document.createElement('style');
final_style.type = 'text/css';

function addNewStyle(selector, style){
  final_style.innerHTML += selector + '{ ' + style + ' } \n';
};

function submitNewStyle(){
  document.getElementsByTagName('head')[0].appendChild(final_style);

  final_style = document.createElement('style');
  final_style.type = 'text/css';
};

function submitNewStyleWithMedia(mediaSelector){
  final_style.innerHTML = '@media(' + mediaSelector + '){\n' + final_style.innerHTML + '\n};';
    submitNewStyle();
};

あなたは基本的にどこでもあなたのコードで実行します
addNewStyle('body', 'color: ' + color1);。ここで、color1変数を定義しています。

現在のCSSファイルを「投稿」したい場合はsubmitNewStyle()
あとでCSSを後で追加できます。

「メディアクエリ」で追加する場合は、オプションがあります。
「addingNewStyles」の後は、単にを使用しますsubmitNewStyleWithMedia('min-width: 1280px');


現在の時間に応じて(自分のものではない)パブリックWebサイトのCSSを変更していたので、これは私のユースケースにかなり役立ちました。「アクティブな」スクリプトを使用する前に1つのCSSファイルを送信し、残りはその後に送信します(サイトをから要素にアクセスする前のように見せますquerySelector)。


今日はこれを試してみるよ。これが私のユースケースでどのように機能するかをお知らせします。成功を祈っている!!!!
lopezdp

0

サーチャーのために; jQueryを使用している場合は、以下を実行できます。

var currentOverride = $('#customoverridestyles');

if (currentOverride) {
 currentOverride.remove();
}

$('body').append("<style id=\"customoverridestyles\">body{background-color:pink;}</style>");

もちろん、内部のcssを好きなように変更できます。

純粋なJavaScriptを好む人もいますが、JavaScriptは機能し、スタイルの動的な書き込み/上書きに対して非常に堅牢です。


0

私はここでいくつかの回答を調べていましたが、新しいスタイルシートがない場合に自動的に追加するものは見つからず、必要なスタイルがすでに含まれている既存のスタイルシートを単に変更するだけではないので、新しい関数(テストされていませんが、すべてのブラウザーで機能するはずですが、addRuleを使用し、さらに基本的なネイティブJavaScriptのみが機能するかどうかを知らせてください):

function myCSS(data) {
    var head = document.head || document.getElementsByTagName("head")[0];
    if(head) {
        if(data && data.constructor == Object) {
            for(var k in data) {
                var selector = k;
                var rules = data[k];

                var allSheets = document.styleSheets;
                var cur = null;

                var indexOfPossibleRule = null,
                    indexOfSheet = null;
                for(var i = 0; i < allSheets.length; i++) {
                    indexOfPossibleRule = findIndexOfObjPropInArray("selectorText",selector,allSheets[i].cssRules);
                    if(indexOfPossibleRule != null) {
                        indexOfSheet = i;
                        break;
                    }
                }

                var ruleToEdit = null;
                if(indexOfSheet != null) {

                    ruleToEdit = allSheets[indexOfSheet].cssRules[indexOfPossibleRule];

                } else {
                    cur = document.createElement("style");
                    cur.type =  "text/css";
                    head.appendChild(cur);
                    cur.sheet.addRule(selector,"");
                    ruleToEdit = cur.sheet.cssRules[0];
                    console.log("NOPE, but here's a new one:", cur);
                }
                applyCustomCSSruleListToExistingCSSruleList(rules, ruleToEdit, (err) => {
                    if(err) {
                        console.log(err);
                    } else {
                        console.log("successfully added ", rules, " to ", ruleToEdit);
                    }
                });
            }
        } else {
            console.log("provide one paramter as an object containing the cssStyles, like: {\"#myID\":{position:\"absolute\"}, \".myClass\":{background:\"red\"}}, etc...");
        }
    } else {
        console.log("run this after the page loads");
    }

};  

次に、これらの2つのヘルパー関数を上記の関数内または他の場所に追加します。

function applyCustomCSSruleListToExistingCSSruleList(customRuleList, existingRuleList, cb) {
    var err = null;
    console.log("trying to apply ", customRuleList, " to ", existingRuleList);
    if(customRuleList && customRuleList.constructor == Object && existingRuleList && existingRuleList.constructor == CSSStyleRule) {
        for(var k in customRuleList) {
            existingRuleList["style"][k] = customRuleList[k];
        }

    } else {
        err = ("provide first argument as an object containing the selectors for the keys, and the second argument is the CSSRuleList to modify");
    }
    if(cb) {
        cb(err);
    }
}

function findIndexOfObjPropInArray(objPropKey, objPropValue, arr) {
    var index = null;
    for(var i = 0; i < arr.length; i++) {
        if(arr[i][objPropKey] == objPropValue) {
            index = i;
            break;
        }
    }
    return index;
}

(CSSスタイル/ルールリストクラスには長さのプロパティしかなく、.filterメソッドがないため、どちらの場合も.filterではなくforループを使用していることに注意してください。)

それを呼び出すには:

myCSS({
    "#coby": {
        position:"absolute",
        color:"blue"
    },
    ".myError": {
        padding:"4px",
        background:"salmon"
    }
})

お使いのブラウザで機能するか、エラーが発生するかをお知らせください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.