jQuery cssNumber

What Is cssNumber?

jQuery.cssNumber (since 1.4.3, removed in 4.0) is an object of camelCase CSS property names that are unitless. Before 4.0, .css() used it to decide whether a bare number should get a px suffix.

// In cssNumber → no px
$("p").css("opacity", 0.5)   // "0.5"
$("p").css("zIndex", 10)     // "10"

// Not in cssNumber → px added (jQuery < 4)
$("p").css("width", 200)     // "200px"

// Add a custom key (guard for 4.0+):
if (jQuery.cssNumber) {
  jQuery.cssNumber.myProp = true;
}

How to Use cssNumber

Treat it as a lookup: if the property is listed, numbers stay unitless.

1. Check that jQuery.cssNumber exists (skip on jQuery 4+).
2. For built-ins like opacity, pass a number to .css() — no px.
3. For a custom property, set $.cssNumber.propName = true.
4. Pair custom keys with a cssHook when the property is synthetic.

Pseudocode

when .css(prop, number) is called (jQuery < 4):
    if prop is in $.cssNumber:
        write number as-is          // opacity → 0.5
    else:
        write number + "px"         // width → "200px"

to teach a custom prop:
    if $.cssNumber exists:
        $.cssNumber.myProp = true

Cheat Sheet

Keep these facts handy for numeric .css() setters.

Live Preview

Compare a unitless property with a dimension property. Results show the inline style attribute after each call.

Sample

$("p").css("opacity", 0.5)
style → "opacity: 0.5;"

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

// <p id="msg">Hello</p>
$("#msg").css("opacity", 0.5);
console.log($("#msg").attr("style")); // "opacity: 0.5;"
console.log($.cssNumber.opacity);     // true

opacity: 0.5;
true

// <div id="box">Demo</div>
$("#box").css("width", 200);
$("#box").css("opacity", 0.4);
console.log($("#box").attr("style"));
// e.g. "width: 200px; opacity: 0.4;"

width: 200px; opacity: 0.4;

// <div id="layer">Top</div>
$("#layer").css("zIndex", 100);
console.log($("#layer").css("z-index")); // "100"
console.log($.cssNumber.zIndex);         // true

100
true

$(function () {
  if ($.cssNumber) {
    $.cssNumber.rotateDeg = true;
  }
  $.cssHooks.rotateDeg = {
    get: function (elem) {
      var m = (elem.style.transform || "").match(/rotate\((-?[\d.]+)deg\)/);
      return m ? parseFloat(m[1]) : 0;
    },
    set: function (elem, value) {
      elem.style.transform = "rotate(" + parseFloat(value) + "deg)";
    }
  };

  $("#box").css("rotateDeg", 90);
  console.log($("#box").css("rotateDeg")); // 90
});

90

Performance Notes

The lookup is a cheap object check. Clarity matters more than micro-cost — explicit unit strings travel better across jQuery major versions.

Key Takeaways