无法使用变量设置CSS-jQuery [英] Can't set CSS using variable - jquery

问题描述

我正在尝试使用从用户在文本字段中键入的内容中检索的变量来动态设置css.

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

这是代码行:

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

一切正常. css属性和css值均可正确跟踪到控制台，但无论出于何种原因，它都不会对其进行设置.如果我进行硬编码，则效果很好.

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.

任何帮助将不胜感激.

推荐答案

您是否有使用.data()的特定原因?根据 jQuery 网站-

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

jQuery.data(elem)

返回元素的唯一ID.

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

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.

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

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.

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

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

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?

> 此处已修改示例

，它使用文本区域进行输入，并允许您指定多个CSS属性.这是可行的，因为jQuery.css()可以接受对象作为参数，因此我们基于textarea值构建具有属性及其相应值的对象，然后将该对象传递到jQuery.css()命令中.就像在CSS样式标签中那样，只需在textarea中指定属性即可.

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; 

，所有内容将与id="mydiv"

此处的jQuery代码-

jQuery Code here -

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

    });

});

这篇关于无法使用变量设置CSS-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！