jQuery CSS Methods

Beginner

7 min read

Updated: Nov 2026

17 method guides

Method index

Index

About This Index

This page is the jQuery CSS index for the tutorial track. Each row links to a full guide with syntax, examples, and FAQs.

Learn the jQuery overview on /jquery. Use this page when you need a CSS API such as .addClass(), .css(), or .width().

Beginner path.

Start with .addClass() and .css(), then .width() / .height()—add .offset() and .scrollTop() when you need coordinates or scroll UI.

Syntax

How to Call a CSS Method

Prefer classes for reusable styles; use .css() for one-off inline values:

jQuery

$("p").addClass("highlight");
$("p").toggleClass("active");
$("p").hasClass("active");            // true/false

$("div").css("color");                // get computed
$("div").css({ color: "navy", "font-size": "18px" });

$("div").width();                     // content width
$("div").outerHeight(true);           // include margin
$("div").offset();                    // { top, left }
$(window).scrollTop(0);

Browse

jQuery CSS Methods Table

All CSS method guides in this jQuery tutorial series (17 tutorials).

Class Attributes

4 methods

Add, remove, toggle, and test CSS classes on matched elements.

Method	Description	Tutorial
`.addClass()`	Add one or more CSS classes — string, space-separated list, array, or callback.	Try it
`.hasClass()`	Return true if any matched element has the given CSS class.	Try it
`.removeClass()`	Remove one, several, or all CSS classes — string, array, or callback.	Try it
`.toggleClass()`	Add or remove classes — flip on/off, or force with a boolean state.	Try it

Inline & Computed Styles

3 methods

Read rendered CSS values and write inline style properties.

Method	Description	Tutorial
`.css()`	Get a computed style from the first match, or set inline styles on every match.	Try it
`$.cssHooks`	Override how .css() gets or sets a property — custom hooks and vendor prefixes.	Try it
`$.cssNumber`	Unitless CSS property map — controls whether .css() appends px to numbers.	Try it

Dimensions

6 methods

Read and set element height and width — content, inner, and outer boxes.

Method	Description	Tutorial
`.height()`	Get content height as a unitless number, or set height on every match.	Try it
`.width()`	Get content width as a unitless number, or set width on every match.	Try it
`.innerHeight()`	Get or set height including padding but not border.	Try it
`.outerHeight()`	Get or set height including padding and border — margin with outerHeight(true).	Try it
`.innerWidth()`	Get or set width including padding but not border.	Try it
`.outerWidth()`	Get or set width including padding and border — margin with outerWidth(true).	Try it

Offset & Position

2 methods

Document coordinates with .offset() and offset-parent coordinates with .position().

Method	Description	Tutorial
`.offset()`	Get or set top/left coordinates relative to the document.	Try it
`.position()`	Get top/left coordinates relative to the offset parent.	Try it

Scroll

2 methods

Read and set horizontal and vertical scroll positions.

Method	Description	Tutorial
`.scrollLeft()`	Get or set the horizontal scroll position in pixels.	Try it
`.scrollTop()`	Get or set the vertical scroll position in pixels.	Try it

Frequently Asked Questions

What are jQuery CSS methods?

They get and set presentation on matched elements: class helpers (.addClass, .removeClass, .toggleClass, .hasClass), inline/computed styles (.css), dimensions (.width, .height), coordinates (.offset, .position), and scroll (.scrollTop, .scrollLeft).

When should I use .addClass() instead of .css()?

Prefer .addClass() when stylesheets already define reusable classes (.active, .error). Use .css() for one-off inline values such as dynamic pixel widths computed at runtime.

Do dimension getters include padding and border?

.width() / .height() are content size. .innerWidth() / .innerHeight() add padding. .outerWidth() / .outerHeight() add border (and margin when you pass true).

How is .offset() different from .position()?

.offset() is relative to the document. .position() is relative to the offset parent—use it for layout inside a positioned container.

Where should I start?

Start with .addClass() and .css(), then .width() / .height(). Add .offset() and .scrollTop() when you need coordinates or scroll UI.

Start with .addClass()

Open the class guide—syntax, examples, and FAQs.

.addClass() tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

16 people found this page helpful

jQuery HTML Methods jQuery .addClass() Method