jQuery .css（）返回对象对象？

Question

I have something like this:

    var windowH = $(window).height();
    var listH = $(".list").height();
    if(windowH > listH){
        $(".list").css({'height': windowH+'px'});   
        alert(windowH);
        alert($(".list").css({'height': windowH+'px'}));
    }

the second alert gives me [object Object] and therefore doesn't insert the correct css. can someone help?

Thanks

Answer 1

A call to $(el).css(propertyName, value) returns the element you're working with,.

This is so you can chain functions.

$(".list").css(propertyName, value).css(propertyName, value).remove(); // etc etc.

windowH is most likely a number, try windowH.toString() + 'px' if you want something like "600px" .

Answer 2

.css method returns the jQuery object (For method chaining), so the alert result is nothing wrong.

Instead of using .css , try use .height method.

$(".list").height(windowH);

Answer 3

Use this:

alert( $(".list").css('height') );

When you call the .css() method with a map of key/value pairs like in your code it assumes you are trying to set those CSS properties, and it returns the jQuery object you called it on (which alert() quite correctly displays as "[object Object]" ). That's why you can chain other jQuery methods after .css({...}) .

If you call .css() with just the name of a particular property like I've shown above then it returns the value of that property so that will work within an alert() . (Note though that if your jQuery object has more than one element, ie, if ".list" matches multiple elements, .css('height') returns the height value for the first element only.)

EDIT: Note that this behaviour in the .css() method is the same as for other jQuery methods that can be used both to set and get "something", like .val() , .html() , .prop() , etc. When called with parameters that set a value these methods all return a jQuery object, but when called with parameters that get a value they all return the appropriate value.

Answer 4

First, you have to set the property and then alert the appropriate values . ..

try

    var windowH = $(window).height();
var listH = $(".list").height();
if(windowH > listH){
    $(".list").css({'height': windowH+'px'});   
    alert(windowH);
    $(".list").css('height', windowH+'px');

    alert(listH);
}