为什么jQuery会为元素的css函数返回undefined？

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?

Answer 1

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'});

Answer 2

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" });

Answer 3

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(...) .

Answer 4

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'});

Answer 5

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" });

Answer 6

http://jsfiddle.net/JNR63/

check this example

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