Search jQuery

jQuery Forum

jQuery - Set CSS using variable, array and for loop

in Using jQuery • 8 years ago

I am trying to set css of an element using variable containing css properties and values generated from some Arrays. But I couldn't pass it into .css({}); function.

Here is my codes:

$('#button_style').on('change', function () {
var button_style = $("#button_style option:selected").text();
var opz = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K'];
var prp = ['font-family', 'font-size', 'width', 'height', 'line-height', ['border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'], 'background', 'box-shadow'];
var inv = ['button_font_family', 'button_text_size', 'button_width', 'button_height', 'button_line_height', ['innertopleft', 'innertopright', 'innerbottomleft', 'innerbottomright'], ['bg_color_gradient1', 'bg_color_gradient2'], ['boxshadw_h_position', 'boxshadw_v_position', 'boxshadw_blur', 'boxshadw_spread', 'boxshadw_color']];
var vals = [ /*0*/ ['Helvetica', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', 'Arial Black', ], /*1*/ ['18', '15', '12', '12', '14', '17', '14', '14', '23', '17', '14'], /*2*/ ['72', '72', '72', '72', '72', '72', '72', '72', '72', '72', '72'], /*3*/ ['68', '40', '36', '36', '72', '83', '36', '36', '72', '36', '36'], /*4*/ ['68', '40', '36', '45', '108', '82', '36', '33', '72', '36', '36'], /*5*/ [['38', '38', '38', '38'], ['10', '10', '10', '10'], ['0', '0', '0', '0'], ['34', '34', '0', '0'], ['72', '0', '0', '0'], ['91', '0', '72', '72'], ['82', '82', '82', '82'], ['82', '37', '36', '36'], ['82', '82', '82', '82'], ['82', '36', '36', '82'], ['82', '0', '36', '36']], /*6*/ [['#f9f9f9', '#d9d3d3'], ['#f2f1f1', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#fbfdff', '#31b2d4'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0'], ['#f9f9f9', '#d0d0d0']], /*7*/ [['0', '-6', '4', '0', '#d9d6d6'], ['0', '-2', '2', '0', '#989797'], ['0', '1', '1', '0', '#000'], ['0', '1', '1', '0', '#000'], ['0', '1', '1', '0', '#000'], ['0', '1', '38', '0', '#f0f9fb'], ['0', '0', '5', '0', '#000'], ['0', '0', '1', '0', '#000'], ['0', '1', '1', '0', '#000'], ['0', '1', '1', '0', '#000'], ['0', '-1', '1', '0', '#000']]];
for (a = 0; a < opz.length; a++) {
if (button_style == opz[a]) {
var vcss = '';
for (c = 0; c < inv.length; c++) {
if (c <= 4) {
$('#' + inv[c]).val(vals[c][a]);
if (c < 1) {
vcss += '"' + prp[c] + '"' + ' : ' + '"' + $('#' + inv[c]).val() + '",\n';
} else if (c >= 1 && c <= 3) {
vcss += '"' + prp[c] + '"' + ' : ' + '"' + $('#' + inv[c]).val() + 'px",\n';
} else {
vcss += '"' + prp[c] + '"' + ' : ' + '"' + $('#' + inv[c]).val() + 'px"\n';
}
}
}
var ish = vcss;
$('.preview').css(ish);
alert(ish);
}
}
});

And this is what I tried to set css to the element :

 var ish = vcss; $('.preview').css(ish);

Could someone show me the correct way to do it?

Thanks in advance..

Replies(4)

jakecigar

Re: jQuery - Set CSS using variable, array and for loop

8 years ago

It's hard to follow your logic without seeing the HTML. Can you share a link or build a http://jsfiddle.net demo?

You omitted what #button_style looks like.

$('.buttonpreview').css(ish);

expects ish to be an Object, not a String.

JΛ̊KE

atblogad1

Re: jQuery - Set CSS using variable, array and for loop

8 years ago

Hi.. thank you for answering. I am sorry for make it confusing. I just need to know how to set css using variables that's created by array and for loop to simplify the script.

I am trying to create a simpler codes in js fiddle but it seem it will take too much time for me to make it work.

Here is if anyone want to fix it to help other:

http://jsfiddle.net/YJzLf/

I had found the way to get what I want. The point is to access the css properties and values directly from the array, instead of convert it to a variable first:

Example:

var style = {};
var style[var1[a]] = var2[b];

If we are using if else statement, then just put the var style = {}; before the if. and var style[var1[a]] = var2[b]; inside it.

Example:

for (var k=0; k<= anArray.length; k++) {
var style = {};
if (condition 1) {
var style[var1[k]] = var2[k];
} else if (condition 2) {
var style[var1[k]] = var2[k] + 'px'; // may be we need to set the css value attribute like px, em, etc..
}
// and then we could simply use the variable style to set the css of an element
$('.preview').css(style);
}

CORRECTION : Take a look at the next reply!

jakecigar