Javascript function with jquery css not functioning (No errors)

Question

I have written a function that using jquery .css and simply passes the element, css property and the css value.

Here is the function:

function addCss(element, cssProperty, cssValue) {
   $(element).css({ cssProperty: cssValue }); 
}

And here's an example usage:

addCss('.container','flex-direction', 'row');

For some reason its doing nothing.

I'm I missing something or is the syntax wrong?

mark_c · Accepted Answer · 2017-09-23 21:58:08Z

3

Try $(element).css({ [cssProperty]: cssValue });

answered Sep 23, 2017 at 21:58

mark_c

1,2121 gold badge8 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Duncan Thacker Over a year ago

@max2020 to explain this, your code wasn't working because the it was always trying to set the CSS property "cssProperty", rather than using the actual value of the variable cssProperty.

Oluwafemi Sule · Accepted Answer · 2017-09-23 21:58:33Z

1

You need to build your object separately if you're in an environment that supports ES6 computed property names.

function addCss(element, cssProperty, cssValue) {
   var rule = {};
   rule[cssProperty] = cssValue;
   $(element).css(rule); 
}

answered Sep 23, 2017 at 21:58

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

Collectives™ on Stack Overflow

Javascript function with jquery css not functioning (No errors)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related