无法使用变量-jquery设置CSS

Question

我试图用我从用户输入的文本字段中检索的变量动态设置css.

这是代码行:

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

一切正常.css属性和css值都正确地跟踪到控制台,但无论出于何种原因它都不会设置它.如果我硬编码它工作正常.

我也试过在这些引号周围包装引号,这也不起作用,所以这不是问题.

我错过了什么吗？我看了一遍,找不到任何甚至远远接近讨论这个问题的东西,所以也许我会以错误的方式解决这个问题.

任何帮助将不胜感激.

Answer 1

您使用.data()的具体原因是什么？根据jQuery网站 -

jQuery.data(ELEM)

返回元素的唯一ID.

通常,此功能仅在内部使用.您可能不会以这种方式使用data()方法.在使用其他data()功能时,必要时会自动调用它.

我已经设置了一个示例,说明如何在2个输入框中键入css名称和值,然后将它们应用到div,以验证是否可以使用变量设置CSS.

您可以在此处编辑和播放示例.

如您所见,它使用jQuery.val()命令从每个文本框中获取文本并将每个文本分配给变量.这是你打算做的吗？

编辑:

这里修改了例子

使用textarea进行输入,并允许您指定多个css属性.这是因为jQuery.css()可以接受一个对象作为参数,所以我们根据textarea值构建一个具有属性及其各自值的对象,然后将该对象传递给jQuery.css()命令.只需在CSS样式标记中指定textarea中的属性,即

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

和所有将被应用到<div>与id="mydiv"

jQuery代码在这里 -

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

    });

});