Impossible de définir CSS à l'aide de la variable - jquery

Question

J'essaie de définir dynamiquement css avec les variables que je récupère à partir de ce qu'un utilisateur tape dans un champ de texte.

Ceci est la ligne de code:

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

Tout fonctionne très bien. La propriété css et la valeur css sont toutes les deux tracées correctement dans la console, mais pour une raison quelconque, elles ne seront pas définies. Si je hardcode cela fonctionne bien.

J'ai essayé d'inclure des guillemets autour de ceux-ci et cela ne fonctionne pas non plus, ce n'est pas le problème.

Ai-je raté quelque chose? J'ai regardé partout et je ne trouve rien qui soit à distance de discuter de cette question alors peut-être que je vais à ce sujet dans le mauvais sens.

Toute aide serait grandement appréciée.

Answer 1

Y a-t-il une raison particulière pour laquelle vous utilisez .data()? Selon jQuery site -

jQuery.data (élém)

Renvoie un ID unique pour l'élément.

Généralement, cette fonction sera uniquement utilisée en interne. Vous n'utiliserez probablement pas la méthode data() de cette manière. Il est appelé automatiquement lorsque cela est nécessaire lors de l'utilisation des autres données() fonctionnalité.

J'ai mis en place an example de la façon dont vous pouvez taper un nom de css et la valeur en 2 boîtes d'entrée, puis les appliquer à une div, pour vérifier que vous pouvez définir des variables en utilisant le CSS.

You can edit and play with the example here.

Comme vous pouvez le voir, il utilise la commande jQuery.val() pour obtenir le texte à l'intérieur de chaque zone de texte et assigner chacun à une variable. Est-ce ce que vous aviez l'intention de faire?

EDIT:

Modified Example here

qui utilise une zone de texte pour l'entrée et vous permet de spécifier plusieurs attributs css. Cela fonctionne parce que jQuery.css() peut accepter un objet en tant que paramètre, donc nous construisons un objet avec des propriétés et leurs valeurs respectives en fonction de la valeur textarea, puis passons cet objet dans la commande jQuery.css(). Il suffit de spécifier les attributs dans la zone de texte comme vous le feriez dans les balises de style CSS-à-dire

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

et tous seront appliqués à la <div> avec id="mydiv"

jQuery code ici -

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

    }); 

});