CSS kann nicht über Variable gesetzt werden - jquery

Question

Ich versuche, dynamisch css mit Variablen, die ich abrufen, was ein Benutzer in ein Textfeld eingeben.

Dies ist die Zeile des Codes:

$(get_elem_hierarchy()).css($(this).data('theCss').theProp, $(this).data('theCss').theVal);

Alles funktioniert einwandfrei. Sowohl die css-Eigenschaft und der css-Wert Trace auf die Konsole richtig, aber aus irgendeinem Grund wird es nicht festgelegt. Wenn ich hardcode es funktioniert gut.

Ich habe auch versucht, diese in Anführungszeichen zu setzen, aber auch das funktioniert nicht, also ist das nicht das Problem.

Übersehe ich etwas? Ich habe überall nachgeschaut und kann nichts finden, was dieses Thema auch nur annähernd behandelt, also vielleicht gehe ich die Sache falsch an.

Für jede Hilfe wären wir Ihnen sehr dankbar.

Answer 1

Gibt es einen bestimmten Grund dafür, dass Sie .data() verwenden? Laut jQuery Standort -

jQuery.data(elem)

Gibt eine eindeutige ID für das Element zurück.

Normalerweise wird diese Funktion nur intern verwendet. Sie werden wahrscheinlich nicht die Methode data() nicht auf diese Weise verwenden. Sie wird automatisch aufgerufen, wenn nötig wenn Sie die andere data() Funktionalität.

Ich habe eine ein Beispiel wie Sie einen CSS-Namen und einen Wert in 2 Eingabefelder eingeben und dann auf ein div anwenden können, um zu überprüfen, dass Sie CSS mit Variablen festlegen können.

Sie können das Beispiel hier bearbeiten und mit ihm spielen .

Wie Sie sehen können, wird der Befehl jQuery.val() verwendet, um den Text aus jedem Textfeld abzurufen und ihn einer Variablen zuzuweisen. Ist es das, was Sie vorhatten zu tun?

EDITAR:

Geändertes Beispiel hier

das eine Textarea für die Eingabe verwendet und die Angabe mehrerer CSS-Attribute ermöglicht. Das funktioniert, weil jQuery.css() ein Objekt als Parameter akzeptieren kann. Wir erstellen also ein Objekt mit Eigenschaften und ihren jeweiligen Werten auf der Grundlage des Textarea-Wertes und übergeben dieses Objekt dann an den jQuery.css()-Befehl. Geben Sie die Attribute in der Textarea einfach so an, wie Sie es in CSS-Style-Tags tun würden, z. B.

background-color: red; height: 500px; width: 300px; 
font-size: 20px; color: white; 

und alle werden auf die <div> con id="mydiv"

jQuery Code hier -

$(function() {

    $('#mybutton').click(function(e) {

    var cssObject = {},
        cssName = null,
        cssValue = null;

    var cssAttributeString = $('#value').val();
    var cssAttributeArray = cssAttributeString.split(";");

    for (var i = 0 ; i < cssAttributeArray.length ; i++){
        cssName = $.trim(cssAttributeArray[i].substring(0,cssAttributeArray[i].indexOf(":")));
        cssValue = $.trim(cssAttributeArray[i].substring(cssAttributeArray[i].indexOf(":") + 1, cssAttributeArray[i].length)); 
        cssObject[cssName] = cssValue;    
    }

    $('#mydiv').css(cssObject);

    });

});