Laden einer externen CSS-Datei für ein bestimmtes DIV

Also im Grunde habe ich eine Seite, die hat eine eigene CSS. Auf meinem server habe ich einen Ordner mit verschiedenen CSS-style-Dateien, so möchte ich eine "preview" - Fenster auf meiner Seite für Sie. Kann ich irgendwie, vielleicht mit Hilfe von javascript, wenden Sie eine externe CSS-Datei nur einen bestimmten DIV-Element, nicht auf die gesamte Seite, so bekomme ich eine "Vorschau" auf die benutzerdefinierte CSS-Datei? Ich würde lieber nicht mit iframes verwenden.

InformationsquelleAutor Martin Marinov | 2011-09-11

  1. 6

    CSS gilt für ganze Dokumente.

    Wenn Sie möchten, zu beschränken, dann müssen Sie Gebrauch machen von einem Nachfahre-Selektor.

    z.B. #id_of_div .the .rest .of .the .selector {}

    Wenden Sie sich diesem zu jedem Selektor, und berücksichtigen Gruppen (also es ist nicht so einfach wie nur, indem der gesamte stylesheet und suffixing jeder })

    Würden Sie auch finden, dass das stylesheet für das Haupt-Dokument anwenden, um Ihre Vorschau.

    Einem Rahmen wäre wohl der beste Ansatz, um dieses problem zu lösen.

    InformationsquelleAutor Quentin

  2. 11

    Wie Quentin sagte, die Sie verwenden können, Nachfahre-Selektor für Einschränkung des Geltungsbereichs. So etwas wie weniger kann helfen, eine Menge. Zum Beispiel würde ich gerne haben "bootstrap.css" gilt nur für #MyDiv, in "meine.weniger":

    #MyDiv {
  @import "bootstrap.less";
}

    "bootstrap.css" sollte umbenannt werden (oder verlinkt) "bootstrap.weniger". Ausführung:

    lessc my.less my.css

    möchte hinzufügen #MyDiv für alle Selektoren in der importierten Datei.

    Können wir machen das mit javascript?
    Sie können less.js um dies zu tun, die bedeutet, dass der render-Prozess abgeschlossen ist client-seitig. Es wird nicht empfohlen, auf die Produktion, Nutzung wenn. Für details siehe hier lesscss.org/#client-side-usage.
    sollte nicht die @import-Regel immer vor allen anderen Arten von Regeln?
    das ist genau das was ich brauchte. Ich wollte nur auf anwenden, um die bootstrap-Klassen zu einem bestimmten div-und das funktionierte perfekt.
    Gibt es eine Möglichkeit, dies zu tun für Selektoren in der importierten Datei, die Kommas? Die CSS-Sie haben nur .classA, .classB und schalten Sie ihn in #MyDiv .classA, .classB

    InformationsquelleAutor Arthur Yip

  3. 5

    Für eines meiner Projekte benötigte ich genau die gleiche Sache, aber auch unterstützt in der CSS-version 2.

    Nach einer langen Suche im ganzen web, ich habe nicht gefunden, etwas sinnvolles, also beschloss ich, erstellt diese Funktionalität mit JavaScript kann tatsächlich anwenden können, eine ganze css zu einem bestimmten Element im DOM.

    Rufen Sie einfach die Funktion applyCSSFileToElement, wie unten beschrieben (abhängig von jQuery-Bibliothek):

    function renderCSSForSelector(css, selector) {
    return ((css+"")||"").replace(/\n|\t/g, " ")
      .replace(/\s+/g, " ")
      .replace(/\s*\/\*.*?\*\/\s*/g, " ")
      .replace(/(^|\})(.*?)(\{)/g, function($0, $1, $2, $3) {
        var collector = [], parts = $2.split(",");
        for (var i in parts) {
            collector.push(selector + " " + parts[i].replace(/^\s*|\s*$/, ""));
        }
        return $1 + " " + collector.join(", ") + " " + $3;
    });
}

function applyCSSToElement(css, elementSelector) {
    $("head").append("<style type=\"text/css\">" + renderCSSForSelector(css, elementSelector) + "</style>");
}

function applyCSSFileToElement(cssUrl, elementSelector, callbackSuccess, callbackError) {
    callbackSuccess = callbackSuccess || function(){};
    callbackError = callbackError || function(){};
    $.ajax({
        url: cssUrl,
        dataType: "text/css",
        success: function(data) {
            applyCSSToElement(data, elementSelector);
            callbackSuccess();
        },
        error: function(jqXHR) {
            callbackError();
        }
    })
}

    Funktionen Erläuterungen:

    • renderCSSForSelector - Eigentlich fügt eine Auswahl für jeden style-definition.
    • applyCSSToElement - Nimmt die CSS-source-Daten, gilt renderCSSForSelector und spritzt es in den HEAD-tag.
    • applyCSSFileToElement - Gilt eine CSS-Datei (cssUrl) in einem bestimmten Bereich (elementSelector) im DOM. Die callbackSuccess wird aufgerufen, wenn die Datei erfolgreich geladen wurde und das CSS angewendet wurde. Die callbackError wird aufgerufen wenn es einen Fehler beim laden der CSS-Datei.

    Glück!

    InformationsquelleAutor Slavik Meltser

  4. 2

    Du könntest ein iframe-Element zum laden der Vorschau-Seite oder dynamisch geladen, die CSS in die Seite. Aber, wenn Sie möchten, die Stile, die nur angewandt wird, um das div, müssen Sie Präfix Ihre CSS-Selektoren mit der id der div. #div-id #element-inside-div { }.

    Dem script für das laden von es in könnte wie folgt Aussehen:

    var cssFile = document.createElement( "link" );
cssFile.rel = "stylesheet";
cssFile.type = "text/css";
cssFIle.href = "file.css";
document.getElementsByTagName( "head" )[0].appendChild( cssFile );

    InformationsquelleAutor Will

Schreibe einen Kommentar