Can't set CSS using variable - jquery

Question

I am trying to dynamically set css with variables I retrieve from what a user types into a textfield.

This is the line of code:

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

Everything works fine. Both the css property and the css value trace to the console correctly but for whatever reason it won't set it. If I hardcode it works fine.

I have tried wrapping quotes around those as well and that doesn't work either so that's not the issue.

Am I missing something? I've looked all over and can't find anything that even remotely comes close to discussing this issue so maybe I'm going about this the wrong way.

Any help would be greatly appreciated.

Answer 1

Is there a specific reason you are using .data() ? According to jQuery site -

jQuery.data(elem)

Returns a unique ID for the element.

Typically this function will only be used internally. You will likely not use the data() method in this way. It is called automatically when necessary when using the other data() functionality.

I've set up an example of how you can type a css name and value into 2 input boxes and then apply them to a div, to verify that you can set CSS using variables.

You can edit and play with the example here.

As you can see, it uses the jQuery.val() command to get the text from within each textbox and assign each to a variable. Is this what you were intending to do?

EDIT:

Modified Example here

that uses a textarea for input and allows you to specify multiple css attributes. This works because jQuery.css() can accept an object as a parameter, so we build an object with properties and their respective values based on the textarea value, and then pass that object into the jQuery.css() command. Just specify the attributes in the textarea as you would within CSS style tags i.e.

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

and all will be applied to the <div> with id="mydiv"

jQuery Code here -

$(function() {

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

    var cssObject = Object();
    var cssName = null;
    var 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);

    });

});