JQuery css() and JavaScript style

Question

I'm confusing.

I have a button

<button onclick="foo(this)" id="bar">Button</button>

And I code JavaScript like this:

var foo = function(param)
{
    param.style.backgroundColor = 'blue';
};

It worked... When I clicked the backgroundColor changed to blue!!

But when I use JQuery css() method, like:

var foo = function(param)
{
    param.css('background-color', 'blue');
};

Nothing happened !

Of course I did add the JQuery library !! But nothing happend and I don't know why..?

Wrap the param inside jQuery. Eg:- jQuery(param).css('background-color', 'blue'); — Abhi
– Abhi, Commented Nov 28, 2015 at 12:13

Quentin · Accepted Answer · 2015-11-28 12:09:20Z

5

Nothing happened !

That's unlikely. What should have happened was that the Console in your browser's developer tools should have said something along the lines of:

Uncaught TypeError: param.css is not a function(…)

Always look at your browser's developer tools when debugging JavaScript.

jQuery doesn't add new methods to HTML Element objects.

css is a method of jQuery objects. You need to call it on a jQuery object.

jQuery(param).css(etc etc)

answered Nov 28, 2015 at 12:09

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

Comments

Ramanlfc · Accepted Answer · 2015-11-28 12:10:49Z

2

param refers to the dom object in foo(), css() method is defined on $ object in jquery so use $(param)

answered Nov 28, 2015 at 12:10

Ramanlfc

8,3541 gold badge21 silver badges24 bronze badges

Abhi · Accepted Answer · 2015-11-28 12:14:33Z

2

Since .css is a jQuery function. So, you should wrap the param inside jQuery. Like:-

jQuery(param).css('background-color', 'blue');

.css will always work with an element selected with jQuery. See Example in Docs

answered Nov 28, 2015 at 12:14

Abhi

4,2916 gold badges49 silver badges79 bronze badges