実行時にjQueryを使用してCSSルール/クラスを作成する

通常、次のルールを持つCSSファイルがあります。

#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

実行時のアクション中にCSS情報を本文などに追加することで、このような静的CSSファイルの作成を回避するにはどうすればよいですか？（jQueryのみを使用）

一度定義したいのですが、jQueryを使用して、後で何度も使用します。そのため、毎回特定のDOM要素に追加したくありません。

シンプルな機能（css("attr1", "value");）は知っていますが、完全に再利用可能なCSSルールを作成するにはどうすればよいですか？

スタイル要素を作成してDOMに挿入できます

$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");
$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");

Opera10 FF3.5 iE8 iE6でテスト済み

単に

$("<style>")
    .prop("type", "text/css")
    .html("\
    #my-window {\
        position: fixed;\
        z-index: 102;\
        display:none;\
        top:50%;\
        left:50%;\
    }")
    .appendTo("head");

バックスラッシュに気づきましたか？新しい行にある文字列を結合するために使用されます。除外するとエラーが発生します。

オブジェクトにcssを適用できます。したがって、次のようにJavaScriptでオブジェクトを定義できます。

var my_css_class = { backgroundColor : 'blue', color : '#fff' };

そして、あなたが望むすべての要素にそれを適用してください

$("#myelement").css(my_css_class);

だからそれは再利用可能です。どんな目的でこれをしますか？

あなたは使用することができますinsertRuleをあなたがするに従って、IE <9をサポートする必要がない場合dottoro。そこには、クロスブラウザーコードも少しあります。

document.styleSheets[0].insertRule('#my-window {\
    position: fixed;\
    z-index: 102;\
    display:none;\
    top:50%;\
    left:50%;\
}', 0)

CSSを注入できるjqueryプラグインは次のとおりです。

https://github.com/kajic/jquery-injectCSS

例：

$.injectCSS({
    "#my-window": {
        "position": "fixed",
        "z-index": 102,
        "display": "none",
        "top": "50%",
        "left": "50%"
    }
});

こことここで説明されている概念を使用しているため、これは他のいくつかの回答と比較して新しいものではありませんが、JSONスタイルの宣言を利用したいと思いました。

function addCssRule(rule, css) {
  css = JSON.stringify(css).replace(/"/g, "").replace(/,/g, ";");
  $("<style>").prop("type", "text/css").html(rule + css).appendTo("head");
}

使用法：

addCssRule(".friend a, .parent a", {
  color: "green",
  "font-size": "20px"
});

CSSのすべての機能をカバーしているかどうかはわかりませんが、これまでのところはうまくいきます。そうでない場合は、自分のニーズの出発点と考えてください。:)

CSSをCSSブロック/ファイルにハードコーディングしたくない場合は、jQueryを使用して、CSSをHTML要素、ID、およびクラスに動的に追加できます。

$(document).ready(function() {
  //Build your CSS.
  var body_tag_css = {
    "background-color": "#ddd",
    "font-weight": "",
    "color": "#000"
  }
  //Apply your CSS to the body tag.  You can enter any tag here, as
  //well as ID's and Classes.
  $("body").css(body_tag_css);
});

カスタムルールの追加は、カスタムCSSを必要とするjQueryウィジェットを作成する場合に役立ちます（特定のウィジェット用に既存のjQueryUI CSSフレームワークを拡張するなど）。このソリューションは、Tarasの回答（上記の最初の回答）に基づいています。

HTMLマークアップに「addrule」のIDを持つボタンと、いくつかのテキストを含む「target」のIDを持つdivがあると仮定します。

jQueryコード：

$( "#addrule" ).click(function () { addcssrule($("#target")); });

function addcssrule(target) 
{ 
var cssrules =  $("<style type='text/css'> </style>").appendTo("head");

cssrules.append(".redbold{ color:#f00; font-weight:bold;}"); 
cssrules.append(".newfont {font-family: arial;}"); 
target.addClass("redbold newfont");     
}       

このアプローチの利点は、コードで変数cssruleを再利用して、ルールを自由に追加または削除できることです。cssrulesがjQueryウィジェットなどの永続オブジェクトに埋め込まれている場合、操作する永続ローカル変数があります。

jQuery().css()スタイルシートのルールは変更されません。一致した各要素のスタイルが変更されるだけです。

代わりに、スタイルシートルール自体を変更するために私が作成したJavaScript関数を次に示します。

    /**
     * Modify an existing stylesheet.
     * - sheetId - the id of the <link> or <style> element that defines the stylesheet to be changed
     * - selector - the id/class/element part of the rule.  e.g. "div", ".sectionTitle", "#chapter2"
     * - property - the CSS attribute to be changed.  e.g. "border", "font-size"
     * - value - the new value for the CSS attribute.  e.g. "2px solid blue", "14px"
     */
    function changeCSS(sheetId, selector, property, value){
        var s = document.getElementById(sheetId).sheet;
        var rules = s.cssRules || s.rules;
        for(var i = rules.length - 1, found = false; i >= 0 && !found; i--){
            var r = rules[i];
            if(r.selectorText == selector){
                r.style.setProperty(property, value);
                found = true;
            }
        }
        if(!found){
            s.insertRule(selector + '{' + property + ':' + value + ';}', rules.length);
        }
    }

利点：

• スタイルは<head>、DOM要素が作成される前に、したがってドキュメントの最初のレンダリングの前にスクリプトで計算でき、視覚的に煩わしいレンダリングを避け、計算してから再レンダリングします。jQueryでは、DOM要素が作成されるのを待ってから、それらを再スタイルして再レンダリングする必要があります。
• スタイル変更後に動的に追加された要素には、追加の呼び出しなしで新しいスタイルが自動的に適用されます jQuery(newElement).css()

警告：

• ChromeとIE10で使用しました。古いバージョンのIEで適切に機能させるには、少し変更する必要があると思います。特に、IEの古いバージョンはs.cssRules定義されていない可能性があるため、s.rulesコンマ区切りのセレクターに関連する奇数/バグのある動作など、いくつかの特性を持つフォールバックにフォールバックします"body, p"。それらを回避すれば、変更を加えなくても古いIEバージョンで大丈夫かもしれませんが、まだテストしていません。
• 現在、セレクターは完全に一致する必要があります。小文字を使用し、コンマ区切りのリストには注意してください。順序は一致している必要があり、それらの形式でなければなりません。"first, second"つまり、区切り文字はコンマの後にスペース文字が続きます。
• コンマで区切られたリスト内のセレクターなど、重複するセレクターを検出してインテリジェントに処理するために、追加の時間を費やす可能性があります。
• !importantあまり問題なくメディアクエリと修飾子のサポートを追加することもできます。

この機能を改善したい場合は、https：//developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheetで役立つAPIドキュメントを見つけて ください。

頻繁にスタイルを動的に変更できるようにする（異常な）場合（例：テーマビルダーアプリ）、<style>タグを追加するか、CSSStyleSheet.insertRule（）を呼び出すと、パフォーマンスとデザインを持つスタイルシートが増加します。デバッグの影響。

私のアプローチでは、セレクター/プロパティのコンボごとに1つのルールのみを許可し、ルールの設定で既存のものをクリアします。APIはシンプルで柔軟です。

function addStyle(selector, rulename, value) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    var rule = stylesheet.insertRule(selector + ' { ' + rulename + ':' + value + ';}', cssRules.length);
}

function clearStyle(selector, rulename) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var i=0; i<cssRules.length; i++) {
        var rule = cssRules[i];
        if (rule.selectorText == selector && rule.style[0] == rulename) {
            stylesheet.deleteRule(i);
            break;
        }
    }       
}

function addStyles(selector, rules) {
    var stylesheet = getAppStylesheet();
    var cssRules = stylesheet.cssRules || stylesheet.rules;
    for (var prop in rules) {
        addStyle(selector, prop, rules[prop]);
    }
}

function getAppStylesheet() {
    var stylesheet = document.getElementById('my-styles');
    if (!stylesheet) {
        stylesheet = $('<style id="my-styles">').appendTo('head')[0];
    }
    stylesheet = stylesheet.sheet;
    return stylesheet;
}

使用法：

addStyles('body', {
    'background-color': 'black',
    color: 'green',
    margin: 'auto'
});

clearStyle('body', 'background-color');
addStyle('body', 'color', '#333')

（動的ルールを使用して）ページに<script>セクションを動的に記述し、jQuerys .addClass（class）を使用して動的に作成されたルールを追加するとどうなりますか？

私はこれを試していませんが、うまくいくかもしれない理論を提供しています。

少し怠惰な答えですが、次の記事が役立つかもしれません：http : //www.javascriptkit.com/dhtmltutors/externalcss3.shtml

また、Googleに「CSSルールの変更」と入力してみてください

document.styleSheets [0]をjQuery（）でラップしようとするとどうなるかわからない

cssRuleプラグインを使用できます。そのときのコードは単純でした：

$.cssRule("#my-window {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}");

これまでのコメントの1つは、なぜそのようなことをしたいのかと尋ねました。たとえば、各アイテムが異なる背景色を必要とするリスト（たとえば、GCalのカレンダーのリスト）のスタイルを作成します。ここで、列の数は実行時までわかりません。

これは、このjsonオブジェクトで色を指定する設定です

 "colors": {
    "Backlink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Blazer": ["rgb(240,240,240)"],
    "Body": ["rgb(192,192,192)"],
    "Tags": ["rgb(182,245,245)","rgb(0,0,0)"],
    "Crosslink": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Key": ["rgb(182,245,182)","rgb(0,118,119)"],
    "Link": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link1": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Link2": ["rgb(245,245,182)","rgb(160,82,45)"],
    "Manager": ["rgb(182,220,182)","rgb(0,118,119)"],
    "Monitor": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Monitor1": ["rgb(255,230,225)","rgb(255,80,230)"],
    "Name": ["rgb(255,255,255)"],
    "Trail": ["rgb(240,240,240)"],
    "Option": ["rgb(240,240,240)","rgb(150,150,150)"]
  }

この機能

 function colors(fig){
    var html,k,v,entry,
    html = []
    $.each(fig.colors,function(k,v){
        entry  = "." + k ;
        entry += "{ background-color :"+ v[0]+";";
        if(v[1]) entry += " color :"+ v[1]+";";
        entry += "}"
        html.push(entry)
    });
    $("head").append($(document.createElement("style"))
        .html(html.join("\n"))
    )
}

このスタイル要素を生成する

.Backlink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Blazer{ background-color :rgb(240,240,240);}
.Body{ background-color :rgb(192,192,192);}
.Tags{ background-color :rgb(182,245,245); color :rgb(0,0,0);}
.Crosslink{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Key{ background-color :rgb(182,245,182); color :rgb(0,118,119);}
.Link{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link1{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Link2{ background-color :rgb(245,245,182); color :rgb(160,82,45);}
.Manager{ background-color :rgb(182,220,182); color :rgb(0,118,119);}
.Monitor{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Monitor1{ background-color :rgb(255,230,225); color :rgb(255,80,230);}
.Name{ background-color :rgb(255,255,255);}
.Trail{ background-color :rgb(240,240,240);}
.Option{ background-color :rgb(240,240,240); color :rgb(150,150,150);}

display：noneをcssクラスに割り当てたくない場合は、スタイルに追加するための正しいアプローチであるjQuery.Ruleが仕事をします。

ajaxコンテンツの追加イベントの前にスタイルを適用し、追加後にコンテンツをフェードしたい場合があります。これでおしまいです。

ここに、CSSクラスの完全な定義を取得する関数があります。

getCSSStyle = function (className) {
   for (var i = 0; i < document.styleSheets.length; i++) {
       var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
       for (var x = 0; x < classes.length; x++) {
           if (classes[x].selectorText  && - 1 != classes[x].selectorText.indexOf(className)) {
               return classes[x].cssText || classes[x].style.cssText;
           }
       }
   }
   return '';
};

あなたはcssobjと呼ばれるこのlibを使用できます

var result = cssobj({'#my-window': {
  position: 'fixed',
  zIndex: '102',
  display:'none',
  top:'50%',
  left:'50%'
}})

いつでも次のようにルールを更新できます。

result.obj['#my-window'].display = 'block'
result.update()

次に、ルールを変更しました。jQueryはこれを行うライブラリではありません。

私は最近これのいくつかをいじっていて、iPhone / iPodサイトをプログラミングするときに2つの異なるアプローチを使用しました。

向きの変化を探すときに最初に出くわしたので、電話が縦向きか横向きかを確認できます。これは非常に静的な方法ですが、シンプルで賢い方法です。

CSSでは：

#content_right,
#content_normal{
 display:none;
}

JSファイル：

function updateOrientation(){
  var contentType = "show_";
  switch(window.orientation){
   case 0:
   contentType += "normal";
   break;

   case -90:
   contentType += "right";
   break; document.getElementById("page_wrapper").setAttribute("class",contentType);
}

PHP / HTMLの場合（JSファイルを最初にインポートしてからbodyタグにインポート）：

<body onorientationchange="updateOrientation();">

これは基本的に、JSファイルから返された結果に応じて、実行する別の事前設定されたCSSブロックを選択します。

また、私が好んだより動的な方法は、スクリプトタグまたはJSファイルへの非常に単純な追加でした。

document.getelementbyid(id).style.backgroundColor = '#ffffff';

これはほとんどのブラウザーで機能しますが、IEの場合は、より強力な弾薬を取り除くのが最善です。

var yourID = document.getelementbyid(id); 
 if(yourID.currentstyle) { 
  yourID.style.backgroundColor = "#ffffff";      // for ie :@ 
 } else { 
  yourID.style.setProperty("background-color", "#ffffff");        // everything else :)
 }

またはgetElementByClass()、アイテムの範囲を使用および変更できます。

お役に立てれば！

灰。

たぶん、あなたはCSSファイルの別のクラスにスタイル情報を入れることができます、例えば：

.specificstyle {
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

次に、選択した時点でjQueryを使用して、このクラス名を要素に追加しますか？

すべてのCSSが入っている.fixed-objectのようなものと呼ばれるCSSクラスを作成するだけです...

.fixed-object{
    position: fixed;
    z-index: 102;
    display:none;
    top:50%;
    left:50%;
}

次に、jqueryでいつでもそのスタイルを使用したい場合は、そのクラスをそれに追加するだけです...

$(#my-window).addClass('fixed-object');

あなたが何をする必要があるか私が誤解していない限り、それはそれを行う最も簡単な方法のようです。

jqueryで.addClass（）を使用することで、ページ上の要素にスタイルを動的に追加できます。例えば。私たちはスタイルを持っています

.myStyle
{
  width:500px;
  height:300px;
  background-color:red;
 }

jqueryの準備ができた状態で、.addClass（myStyle）のようなcssを追加できます