Erstellen Sie zur Laufzeit eine CSS-Regel / Klasse mit jQuery

Normalerweise habe ich eine CSS-Datei, die die folgende Regel:

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

Wie kann ich vermeiden, solch eine statische CSS-Datei durch hinzufügen der CSS-Informationen während der Laufzeit Aktionen auf den Körper, oder etwas ähnliches? (nur mit jQuery)

Ich will definieren Sie es doch mal mit jQuery und verwenden Sie es viele Male später; das ist, warum ich nicht wollen, fügen Sie es zu jeder Zeit an den bestimmten DOM-elements.

Ich weiß, die einfache Funktionen (css("attr1", "value");), aber wie kann ich erstellen ein vollständiges wiederverwendbare CSS-Regel?

InformationsquelleAutor der Frage stephan | 2009-07-31

  1. 243

    Können Sie erstellen, die style-element und fügen Sie es in DOM

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

    getestet auf Opera10 FF3.5 iE8, iE6

    InformationsquelleAutor der Antwort Taras Bulba

  2. 85

    Einfach 

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

    Bemerkt die Schrägstriche zurück? Sie werden verwendet, um die join-strings, die auf neuen Linien. Verlassen Sie aus, wird ein Fehler generiert.

    InformationsquelleAutor der Antwort

  3. 19

    können Sie anwenden, css und ein Objekt. So können Sie definieren Ihr Objekt in javascript so:

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

    Und dann einfach anwenden, um alle Elemente, die Sie wollen

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

    Damit es wiederverwendbar ist. Welchen Zweck würde Sie dies tun, wenn?

    InformationsquelleAutor der Antwort Yuval Karmi

  4. 11

    Können Sie insertRulewenn Sie nicht brauchen, um Unterstützung von IE < 9, nach dottoro. Es ist ein bisschen cross-browser-code dort auch.

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

    InformationsquelleAutor der Antwort Sean

  5. 9

    Hier ist ein jquery-plugin, das Ihnen erlaubt, um zu injizieren, CSS:

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

    Beispiel:

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

    InformationsquelleAutor der Antwort Robert Kajic

  6. 7

    Wenn Sie nicht wollen, zu fest die CSS in eine CSS-block/- Datei, können Sie jQuery verwenden, um dynamisch hinzufügen von CSS -, HTML-Elemente, IDS und Klassen.

    $(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);
});

    InformationsquelleAutor der Antwort Mike Trpcic

  7. 7

    Dies ist nicht etwas neues, im Vergleich zu einigen der anderen Antworten, da Sie mit dem Konzept beschrieben hier und hieraber ich wollte die Verwendung der JSON-style-Deklaration:

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

    Verwendung:

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

    Ich bin mir nicht sicher, ob es deckt alle Funktionen von CSS, aber so weit es funktioniert für mich. Falls nicht, betrachten Sie es als Startpunkt für Ihre eigenen Bedürfnisse. 🙂

    InformationsquelleAutor der Antwort sjngm

  8. 5

    Beachten Sie, dass jQuery().css() nicht ändern, stylesheet-Regeln, es ändert nur den Stil jedes passende element.

    Statt, hier ist eine javascript-Funktion, die ich schrieb, ändern Sie die stylesheet-Regeln selbst.

        /**
     * 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);
        }
    }

    Vorteile:

    • Stile berechnet werden kann, in einem <head> Skript vor der DOM-Elemente erstellt und damit vor dem ersten Rendern des Dokuments, die Vermeidung einer optisch-ärgerlich machen, dann berechnen, dann neu Rendern. Mit jQuery, Sie würde warten, bis die DOM-Elemente erstellt werden, dann re-style und re-render.
    • Elemente, die Hinzugefügt werden dynamisch nach der restyle werden automatisch über die neue Stile angewendet, ohne einen zusätzlichen Aufruf jQuery(newElement).css()

    Vorsichtsmaßnahmen:

    • Ich habe es auf Chrome und IE10. Ich denke, dass es möglicherweise eine kleine änderung zu machen, arbeiten auch auf älteren IE-Versionen. Insbesondere ältere IE-Versionen möglicherweise nicht s.cssRules definiert, so dass Sie zurückgreifen, um s.rules die hat einige Besonderheiten, solcher als sonderbar/buggy Verhalten im Zusammenhang mit Kommata getrennte Selektoren, wie "body, p". Wenn Sie vermeiden, diejenigen, die Sie vielleicht ok sein, die in älteren IE-Versionen ohne änderungen, aber ich habe es noch nicht getestet noch nicht.
    • Derzeit Selektoren müssen exakt übereinstimmen: verwenden Sie Kleinbuchstaben, und seien Sie vorsichtig mit Komma-separierte Listen; die Bestellung Bedarf zu entsprechen, und Sie sollte im format "first, second" ich.e das Trennzeichen ist ein Komma gefolgt von einem Leerzeichen.
    • Man könnte wahrscheinlich verbringen zusätzliche Zeit über versucht es zu erkennen und intelligent zu verarbeiten überlappende Selektoren, wie Sie in Komma-separierte Listen.
    • Man könnte auch hinzufügen von Unterstützung für media queries und die !important modifier, ohne zu viel Mühe.

    Wenn Sie Lust haben, machen einige Verbesserungen zu dieser Funktion finden Sie einige nützliche API-docs hier:
    https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

    InformationsquelleAutor der Antwort Craig

  9. 4

    Hinzufügen von benutzerdefinierten Regeln ist nützlich, wenn Sie erstellen Sie ein jQuery-widget, das erfordert eine benutzerdefinierte CSS-Datei (wie die Ausweitung der bestehenden jQueryUI CSS-framework für Ihr widget). Diese Lösung baut auf Taras Antwort (die erste oben).

    Vorausgesetzt, Ihr HTML-markup hat einen button mit der id "addrule" und ein div mit der id "Ziel" mit text:

    jQuery-code: 

    $( "#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");     
}

    Der Vorteil dieses Ansatzes ist, dass Sie wiederverwenden können variable cssrules in Ihrem code zu addieren oder zu subtrahieren Regeln. Wenn cssrules ist eingebettet in ein persistentes Objekt wie ein jQuery-widget, das Sie über eine permanente lokale variable, mit zu arbeiten.

    InformationsquelleAutor der Antwort fbloggs

  10. 3

    Was ist, wenn Sie dynamisch schrieb < script > - Abschnitt auf Ihrer Seite (mit Ihrer dynamischen Regeln), und dann verwendet, jQuerys .addClass( class ) hinzufügen, diese dynamisch erstellten Regeln?

    Habe ich nicht ausprobiert, nur mit einer Theorie, die funktionieren könnte.

    InformationsquelleAutor der Antwort Bryan Denny

  11. 3

    In (ungewöhnlichen) Fällen, wo Sie wollen in der Lage sein, dynamisch zu ändern, die Stile oft-z.B. ein theme builder app -- hinzufügen <style> tags oder rufen CSSStyleSheet.insertRule() führt zu einer wachsenden stylesheet, die haben Leistung und design-debugging Auswirkungen.

    Mein Ansatz erlaubt nur eine einzige Regel pro Selektor/Eigenschaft combo, beseitigen Sie alle vorhandenen auf die Setzung einer Regel. Die API ist einfach und flexibel:

    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;
}

    Verwendung:

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

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

    InformationsquelleAutor der Antwort Jason Boyd

  12. 2

    Bisschen faul diese Frage beantworten, aber die folgenden Artikel helfen:
    http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

    Auch, geben Sie "ändern Sie die css-Regeln" in google

    Nicht sicher, whatwould passiert, wenn man versucht, wickeln Sie ein Dokument.styleSheets[0] mit jQuery() obwohl man könnte es versuchen

    InformationsquelleAutor der Antwort James Wiseman

  13. 2

    Können Sie eine der cssRule plug-in. Der code war einfach dann:

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

    Einer der Kommentare bisher gefragt, warum man das wollen würde, so etwas zu tun. Zum Beispiel das erstellen von Stilen für eine Liste, wo jedes Element muss eine eindeutige Hintergrundfarbe (zB. GCal ist die Liste der Kalender), wo die Anzahl der Spalten ist bis zur Laufzeit nicht bekannt.

    InformationsquelleAutor der Antwort Robert Gowland

  14. 2

    Hier ist ein setup gibt das Kommando über Farben mit diesem json-Objekt

     "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)"]
  }

    diese Funktion

     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"))
    )
}

    zur Herstellung dieses Stil-element

    .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);}

    InformationsquelleAutor der Antwort Chris Glasier

  15. 1

    wenn Sie don' t wollen, weisen Sie ein display:none, um eine css-Klasse, den richtigen Ansatz in Anhängen zu Stil, jQuery.Regel die Arbeit machen.

    Ich einige Fälle, die Sie anwenden möchten stiles, bevor Sie die append-event des ajax content fade Inhalte nach Anhängen, und das ist es!

    InformationsquelleAutor der Antwort Mattia

  16. 1

    Hier haben Sie eine Funktion, um die vollständige definition einer CSS-Klasse:

    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 '';
};

    InformationsquelleAutor der Antwort berniecc

  17. 1

    Können Sie diese lib genannt cssobj

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

    Können Sie jederzeit aktualisieren Sie Ihre Regeln wie diese:

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

    Dann haben Sie die Regel geändert. jQuery ist nicht die lib dies zu tun.

    InformationsquelleAutor der Antwort James Yang

  18. 0

    Ich war Herumspielen mit einigen dieser vor kurzem und ich habe zwei verschiedene Vorgehensweisen beim Programmieren einer iPhone - /iPod-Website.

    Ersten Weise stieß ich bei der Suche nach Orientierung ändert, so dass Sie sehen können, ob sich das Telefon im hoch-oder Querformat, dies ist eine sehr statische Weise, sondern einfach und clever:

    CSS :

    #content_right,
#content_normal{
 display:none;
}

    In der JS-Datei:

    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);
}

    In PHP/HTML (Importieren Sie Ihre JS-Datei zuerst, dann im body-tag):

    <body onorientationchange="updateOrientation();">

    Diesem Grunde wählt eine andere pre-set CSS-block ausgeführt, je nach dem Ergebnis zurück gegeben aus der JS-Datei.

    Auch die dynamischere Art, die ich bevorzugt war eine sehr einfache neben einem script-tag, oder Ihre JS-Datei:

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

    Dies funktioniert für die meisten Browser, aber IE ist es am besten zu nehmen, es ist Munition mit etwas enger:

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

    Oder verwenden Sie getElementByClass() zu ändern und eine Reihe von Gegenständen.

    Hoffe, das hilft!

    Asche.

    InformationsquelleAutor der Antwort Ash

  19. -2

    Vielleicht können Sie die style-Informationen in einer separaten Klasse in der css-Datei, z.B.:

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

    und dann die jQuery an der Stelle Ihrer Wahl, um dieses classname das element?

    InformationsquelleAutor der Antwort JorenB

  20. -2

    Könntest du einfach eine css-Klasse namens etwas wie .Feste-Objekt, das alle Ihre css...

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

    Dann in jquery, Wann immer Sie wollen, etwas zu haben, dass Stil nur hinzufügen, dass Klasse...

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

    Dass scheint, wie die einfachste Weg, es zu tun, es sei denn, ich bin Missverständnis, was getan werden muss.

    InformationsquelleAutor der Antwort Sir David of Lee

  21. -8

    Mithilfe .addClass() in jquery können wir dynamisch Stil hinzufügen, um Elemente auf der Seite.
    zB. wir haben Stil

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

    Sich jetzt im Status "bereit" von jquery können wir hinzufügen, css wie
    .addClass(myStyle)

    InformationsquelleAutor der Antwort Avinash

Schreibe einen Kommentar