Why would jQuery return undefined for the css function of an element?

Question

jQuery 1.11.1, on Mac OS X Mavericks, latest version of Safari.

I'm trying to set CSS properties with the css function. css() is missing from elements.

First, I validated that the element is selected correctly:

// There is only one element that has id="container"
var $container = $('#container');

// Selector returns a collection. I have to access first element:
console.log($container[0]); // prints HTMLDivElement

// css function is undefined
console.log($container[0].css); // prints undefined

// Also can't set any css value. Gives undefined error.
$container[0].css({backgroundColor:'blue'});

The error is:

TypeError: 'undefined' is not a function (evaluating '$container[0].css({backgroundColor:'blue'})')

I removed everything from the test page. It includes jQuery, and within the body it has the div with the ID. Very simple. Beneath that, there is the JavaScript code shown above.

Any idea why the div would be lacking the css function?

Remember, jQuery creates an object that is a superset of the native DOM object. That is, it contains all properties/methods of a native DOM object plus additional properties/methods specific to jQuery... — War10ck
– War10ck, Commented Jul 30, 2014 at 20:48

Fenton · Accepted Answer · 2014-07-30 20:44:36Z

7

It is because you are dropping out of the jQuery object and are using the DOM element...

$container[0].css({backgroundColor:'blue'});

The [0] here gets you the DOM object from the jQuery object.

Use jQuery if you want to access the jQuery method...

$container.css({backgroundColor:'blue'});

answered Jul 30, 2014 at 20:44

Fenton

253k74 gold badges404 silver badges414 bronze badges

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

Comments

entropic · Accepted Answer · 2014-07-30 20:45:00Z

4

You're using jQuery incorrectly. When you say $container[0] you are getting the first javascript DOM element of the jQuery object (which doesn't have any jquery functions attached to it). If you want to get the css background color of the element using jQuery you need to do $container.css("background-color"), and to set it $container.css("background-color", "blue"); or $container.css({ "background-color": "blue" });

answered Jul 30, 2014 at 20:45

entropic

1,68314 silver badges27 bronze badges

Comments

undefined · Accepted Answer · 2014-07-30 20:44:47Z

2

Because the css function is a method of a jquery object. When you do $container[0] you get the first DOM node that matched the selector, which is not a jquery object.

Try $container.css(...).

answered Jul 30, 2014 at 20:44

undefined

2,0933 gold badges26 silver badges48 bronze badges

Comments

André Pavan · Accepted Answer · 2014-07-30 20:44:43Z

1

When you access the collection items, no longer has the jQuery methods, only the DOM elements.

You could replace:

$container[0].css({backgroundColor:'blue'});

by

$container.css({backgroundColor:'blue'});

answered Jul 30, 2014 at 20:44

André Pavan

1015 bronze badges

Comments

Serhat Oz · Accepted Answer · 2019-11-07 10:51:59Z

0

If you have one more div element with the same css attribute,

for instance lets say below statement returns more than one result:

var $container = $('.container');  // Has 3 results

And you want to reach specific elements css attribute then you can revert the dom element into jquery element and do what you want as below:

$($('.container').get(2)).css({ "background-color": "blue" });

answered Nov 7, 2019 at 10:51

Serhat Oz

7988 silver badges13 bronze badges

Comments

aahhaa · Accepted Answer · 2014-07-30 20:48:18Z

-2

http://jsfiddle.net/JNR63/

check this example

alert($container.css("width"));

answered Jul 30, 2014 at 20:48

aahhaa

2,2713 gold badges20 silver badges31 bronze badges

1 Comment

showdev Over a year ago

What are you demonstrating here?

Collectives™ on Stack Overflow

Why would jQuery return undefined for the css function of an element?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related