jQuery CSS Cheat Sheet

jQuery CSS - CSS
Get css property of element. Set multiple properties.

jQuery CSS - Positioning
$(“#elementid”).(cssproperty); $(“#elementid”).css({‘border’:’1px solid red’, ‘font-size’ : ‘12px’, ‘font-weight:bold’}); $(“#elementid”).css(‘border’, ‘1px solid red’);
Get the offset (position of element relative to the page). Returned as an object. Get the position (position of element relative to parent). Returned as object. Get scrollbar vertical position. Works on any element with scrollbar. Set scrollbar vertical position. Get scrollbar horizontal position. Set scrollbar horizontal position.

var offset = $(“#elementid”).offset(); alert(offset.left); alert(offset.top); var position = $(“#elementid”).offset(); alert(position.left); alert(position.top); $(window).scrollTop();

Set single property.

jQuery CSS - Height and Width
Get the current height of element. Set the current height of element. Get the current width of element. Set the current width of element. Get the inner height (height of element incl. padding excl. border) of element. Get the inner width (width of element incl. padding excl. border) of element. Get the outer height (height of element incl. padding and border) of element. If true param passed in also includes margin height. Get the outer width of element (see outer height notes above).

$(“#elementid”).height(); $(“#elementid”).height(120); $(“#elementid”).width(); $(“#elementid”).width(170); $(“#elementid”).innerHeight();

$(window).scrollTop(700); $(window).scrollLeft(); $(window).scrollLeft(400);

Stylesheets
Change single stylesheet. Switch particular stylesheet.

$(“#elementid”).innerWidth();

$("link[rel=stylesheet]").attr({href : "css/sheet_a.css"}); $("link[rel=stylesheet][href=css/sheet_c.css]").attr( {href : "css/sheet_a.css"}); $("head").append('<link rel="stylesheet" type="text/css" href="css/sheet_a.css" />');

$(“#elementid”).outerHeight(); or $(“#elementid”).outerHeight(true);

Add a stylesheet.

jQuery Attributes - Class
$(“#elementid”).outerWidth(); or $(“#elementid”).outerWidth(true);
Add a class to an element. Check element has a particular class. Remove a class from an element. Remove a class if element has it otherwise add the class.

$(“#elementid").addClass(“class”); $(“#elementid").hasClass(“class”); $(“#elementid”).removeClass(“class”); $(“#elementid").toggleClass(“class”);

jQuery Attributes - Attr
Get the ID of element.

e.g. $(“#elementid div:firstchild").attr("id"); e.g. $(“#elementid div:firstchild").attr("id", “my_new_id”); $(“#elementid”).removeAttr(“id”);

Set the ID of element.

Remove the ID attribute from an element.

Copyright 2009 – Tim Radnidge

Sign up to vote on this title
UsefulNot useful