8/14/2019 jQuery - CSS Cheat Sheet

1/1

Copyright 2009Tim Radnidge

Query CSS - CSS

et css property ofement.

$(#elementid).(cssproperty);

et multiple properties. $(#elementid).css({border:1pxsolid red, font-size : 12px,font-weight:bold});

et single property. $(#elementid).css(border, 1pxsolid red);

jQuery CSS - Positioning

Get the offset (positionof element relative to

the page). Returned asan object.

var offset =$(#elementid).offset();alert(offset.left);alert(offset.top);

Get the position(position of elementrelative to parent).Returned as object.

var position =$(#elementid).offset();alert(position.left);alert(position.top);

Get scrollbar verticalposition. Works on anyelement with scrollbar.

$(window).scrollTop();

Set scrollbar verticalposition.

$(window).scrollTop(700);

Get scrollbar horizontalposition.

$(window).scrollLeft();

Set scrollbar horizontalposition.

$(window).scrollLeft(400);

Query CSS - Height and Width

et the current heightelement.

$(#elementid).height();

et the current heightelement.

$(#elementid).height(120);

et the current widthelement.

$(#elementid).width();

et the current widthelement.

$(#elementid).width(170);

et the inner heighteight of element incl.

adding excl. border)

element.

$(#elementid).innerHeight();

et the inner widthwidth of element incl.adding excl. border)

element.

$(#elementid).innerWidth();

et the outer heighteight of element incl.

adding and border) ofement. If true paramassed in also includesargin height.

$(#elementid).outerHeight();or

$(#elementid).outerHeight(true);

et the outer width ofement (see outereight notes above).

$(#elementid).outerWidth();or

$(#elementid).outerWidth(true);

Query Attributes - Attr

et the ID of element. e.g. $(#elementiddiv:first-

child").attr("id");

et the ID of element. e.g. $(#elementiddiv:first-child").attr("id", my_new_id);

emove the ID attributeom an element.

$(#elementid).removeAttr(id);

jQuery Attributes - Class

Add a class to anelement.

$(#elementid").addClass(class);

Check element hasa particular class.

$(#elementid").hasClass(class);

Remove a classfrom an element.

$(#elementid).removeClass(class);

Remove a class ifelement has it

otherwise add theclass.

$(#elementid").toggleClass(class);

Stylesheets

Changesinglestylesheet.

$("link[rel=stylesheet]").attr({href :"css/sheet_a.css"});

Switchparticularstylesheet.

$("link[rel=stylesheet][href=css/sheet_c.css]").attr(

{href : "css/sheet_a.css"});

Add astylesheet.

$("head").append('');

Quer CSS Cheat Sheet