How can we return the css attributes of an element with jQuery?

Question

One of the most powerful things of jQuery is to select any item on a page like this:

$(".block").css("border","3px solid red");

How can I also get the values of the selected items like width height and top left offset?

Answer 1

Use width, height and position or offset:

var elem = $(".block");
var elemWidth = elem.width();
var elemHeight = elem.height();
var elemPosition = elem.position();
var elemOffset = elem.offset();

For further questions, first take a look into the jQuery documentation.

Answer 2

var height = $(".block").css("height");
alert(height);

Answer 3

Try this:

$(".block").css("border","3px solid red").offset().top
$(".block").css("border","3px solid red").offset().left

CSS/offset() in JQuery

Answer 4

Like @Gumbo said yes you can get the height and position. If you are interested in other css attributes you get the value like this:

var border = $(".block").css("border")

But for height and width you are better off using height() and width() functions