jQuery .css(): Read, Set, and Clear Styles

jQuery Reference

.css() reads the first matched element’s computed style or sets inline styles on every matched element. A computed value can differ from the string originally written in the stylesheet.

Syntax and behavior

const color = $("#box").css("color");
const styles = $("#box").css(["color", "width"]);
$("#box").css({ color: "#a00000", padding: "12px" });

CSS stands for Cascading Style Sheets and controls presentation and layout. A getter incorporates applied styles and inheritance: a color may be returned as rgb(...), or a percentage width as pixels. Pass an array of property names to retrieve a property-value object. Set styles with a property/value pair or an object; a setter returns the jQuery object.

The official jQuery .css() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery css example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<p id="box" style="color: #0000ff;">Paragraph to style</p>
<button id="change" type="button">Change styles</button>
<button id="reset" type="button">Clear changes</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#change").on("click", function () {
        $("#box").css({ color: "#a00000", padding: "12px", border: "2px solid #835b00" });
        $("#output").text("padding-top: " + $("#box").css("padding-top"));
      });
      $("#reset").on("click", function () {
        $("#box").css({ color: "", padding: "", border: "" });
        $("#output").text("Inline changes cleared");
      });
    });
  </script>
</body>
</html>

Expected result

Change styles applies red text, padding, and a border, and shows padding-top: 12px. Clear changes removes these inline properties so other CSS and inheritance apply again. It does not restore the original blue inline color, because the example did not save that value separately.

Important details and troubleshooting

Explicit units such as "12px" or "1.2em" make length values clear. Since jQuery 4.0, automatic px addition for numeric values is limited to a defined set of properties, not every CSS property.
Read specific properties such as margin-top or border-top-width instead of depending on shorthand-property serialization.
Use the exact name for CSS custom properties, for example .css("--accent", "#a00000"). Do not apply camelCase conversion to their names.
Use class methods to keep repeated UI states in one stylesheet. Read HTML attributes with .attr(), rather than treating them as CSS properties.

Compare the behavior with .addClass() and CSS classes, .attr() and HTML attributes, .width() and content-box measurements.

jQuery Reference

jQuery .after(): Insert Content as the Next Sibling

Insert or move content immediately after a target, and compare after with inside insertion and insertAfter syntax.

jQuery .addBack(): Include the Previous Traversal Selection

Include the previous traversal collection and understand which elements the optional selector filters.

jQuery .toggleClass(): Toggle a Class or Set Its State

Distinguish reversing a class from setting a known Boolean state, with a toggle-button example and current syntax.

jQuery .unwrap(): Remove a Parent and Keep Its Children

Remove matching immediate parents while preserving their children, and understand layout, event, and restoration implications.

jQuery .remove(): Remove Elements, Data, and Events

Remove selected elements and their descendants, understand selector filtering, and compare empty and detach for reuse.

jQuery .css(): Read, Set, and Clear Styles

Read computed styles, set and clear inline properties, and handle CSS units and numeric values in jQuery 4.0.

jQuery :button Selector: Which Elements Does It Match?

Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.

jQuery .wrapAll(): Put Selected Elements in One Wrapper

Collect selected elements into one wrapper and inspect how separated siblings move, including the limits of unwrapping.

jQuery .empty(): Clear Content and Keep the Container

Clear a container’s elements and text without deleting it, refill it, and understand how field values and event handlers differ.

jQuery .attr(): Read and Set HTML Attributes

Read and set attributes, distinguish them from current field properties, and understand Boolean and ARIA handling in jQuery 4.0.