Scribd
Upload
171 views1 page

Jquery - CSS Cheat Sheet

This document provides a cheat sheet on using jQuery to manipulate CSS and attributes. It outlines how to get and set CSS properties, positions, heights, widths, and more. It also shows how to add, check for, and remove classes, as well as get, set, and remove attributes like IDs. The cheat sheet is intended to be a quick reference for common jQuery CSS and attribute tasks.

Uploaded by

nobandy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
171 views1 page

Jquery - CSS Cheat Sheet

This document provides a cheat sheet on using jQuery to manipulate CSS and attributes. It outlines how to get and set CSS properties, positions, heights, widths, and more. It also shows how to add, check for, and remove classes, as well as get, set, and remove attributes like IDs. The cheat sheet is intended to be a quick reference for common jQuery CSS and attribute tasks.

Uploaded by

nobandy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 1

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

You might also like