Home jQuery CSS cssHooks jQuery cssHooks Definition
What Is cssHooks? jQuery.cssHooks (since 1.4.3 ) lets you plug custom get and set functions for a CSS property name. That extends both .css().animate()
$.cssHooks.someProp = {
get: function (elem, computed, extra) { /* read */ },
set: function (elem, value) { /* write */ }
};
// Then normal API works:
$("#el").css("someProp", "10px");
$("#el").css("someProp"); Approach
How to Use cssHooks Feature-test if needed, register get/set on ready, then call .css() as usual.
Confirm $.cssHooks exists (jQuery 1.4.3+). Optional: feature-test the real style property name (standard vs vendor). Inside $(function () { … }), assign $.cssHooks.propName = { get, set }. Use .css("propName", value) — hyphenated names work too after the hook exists. Piece Required? Role get(elem, computed, extra)Usually Return the property value for reads set(elem, value)Usually Apply the value on writes $.cssNumberOptional Mark the property unitless $.fx.stepOptional Drive .animate() frames
Pseudocode if not $.cssHooks:
require jQuery 1.4.3+
on document ready:
realName = featureTest("borderRadius") // optional
$.cssHooks.borderRadius = {
get(elem): return style from realName
set(elem, value): elem.style[realName] = value
}
// Call sites stay simple:
$("#box").css("borderRadius", "10px")
$("#box").css("border-radius", "20px") Reference
Cheat Sheet Keep these facts handy while extending .css().
Topic Detail API jQuery.cssHooks / $.cssHooksSince jQuery 1.4.3 Register Inside $(function () { … }) Shape { get, set } per property keyNames CamelCase key; CSS hyphen form still works Units $.cssNumber.prop = true skips pxAnimate $.fx.step.prop = function (fx) { … }
Try it
Live Preview A tiny custom hook demoPad maps to paddingLeft. Pick an action and run it.
Sample
Code
jQuery Examples Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
1. Get/set skeleton 2. Feature test 3. Custom + cssNumber 4. Animate step Example 1 — Basic Get/Set Skeleton Register a hook on ready, then set and read with .css().
$(function () {
$.cssHooks.borderRadius = {
get: function (elem) {
return elem.style.borderRadius || "0px";
},
set: function (elem, value) {
elem.style.borderRadius = value;
}
};
$("#box").css("borderRadius", "16px");
console.log($("#box").css("borderRadius")); // "16px"
}); How It Works Ready. Registration waits until document ready.Hook. get reads; set writes style.borderRadius.Call. .css("borderRadius", "16px") hits your set.Read. A one-arg .css() hits your get.Example 2 — Feature-Test Property Name Find the supported name (standard or vendor-prefixed) before wiring a hook.
function styleSupport(prop) {
var cap = prop.charAt(0).toUpperCase() + prop.slice(1);
var prefixes = ["Moz", "Webkit", "ms"];
var div = document.createElement("div");
var supported = prop in div.style ? prop : null;
if (!supported) {
for (var i = 0; i < prefixes.length; i++) {
var vendor = prefixes[i] + cap;
if (vendor in div.style) { supported = vendor; break; }
}
}
return supported;
}
console.log(styleSupport("borderRadius")); // e.g. "borderRadius" How It Works Probe. Create a temporary div and check div.style.Standard first. If borderRadius exists, use it.Prefixes. Otherwise try Moz, Webkit, ms.Reuse. Pass that real name into your hook’s get/set.Example 3 — Custom Property + cssNumber Expose a unitless rotateDeg that maps to transform.
$(function () {
$.cssNumber.rotateDeg = true; // do not append "px"
$.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", 45);
console.log($("#box").css("rotateDeg")); // 45
}); How It Works cssNumber. Marks the property unitless so jQuery won’t add px.set. Builds a rotate(Ndeg) transform string.get. Parses the degrees back out of style.transform.API. Call sites look like a normal CSS property: .css("rotateDeg", 45).Example 4 — Hook + $.fx.step Let .animate() tween a hooked numeric property.
$(function () {
$.cssHooks.padX = {
get: function (elem) {
return parseFloat(elem.style.paddingLeft) || 0;
},
set: function (elem, value) {
elem.style.paddingLeft = (typeof value === "number" ? value + "px" : value);
}
};
$.fx.step.padX = function (fx) {
$.cssHooks.padX.set(fx.elem, fx.now);
};
$("#box").css("padX", 0).animate({ padX: 40 }, 1);
// After the tween, padX reads ~40
}); How It Works Hook. padX maps to paddingLeft as a number.Step. Each animation frame calls set(elem, fx.now).Animate. .animate({ padX: 40 }) tweens that number.Best for. Simple numeric properties — complex strings need more custom code.Edge Cases & Pitfalls Check these before shipping a cssHook plugin.
ready Too-early registration gets wiped Always register inside document ready so jQuery does not overwrite your hooks.
px Numbers may gain px For unitless values, set $.cssNumber.propName = true or always pass a full string like "45deg".
support No supported property → no style If feature tests fail, skip the hook or map to a proprietary alternative — otherwise nothing is applied.
animate Complex values need custom steps $.fx.step works best for numbers. Colors, transforms, and lists often need extra parsing.
Compatibility
Browser Support jQuery.cssHooks needs jQuery 1.4.3+ and a browser DOM . It is not for Node.js without a DOM.
✓ jQuery 1.4.3+ · Browsers only
jQuery.cssHooks Works in Chrome, Firefox, Safari, Edge, and other browsers with a modern jQuery build. Vendor prefixes matter only on older engines.
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support $.cssHooks Browsers
Bottom line: Use cssHooks in the browser for custom or prefixed CSS properties. Prefer plain .css() for everyday styling.
Analysis
Performance Notes Approach Cost Best for Plain .css() Lowest Standard properties cssHook get/set Small overhead Normalization / custom props Hook + animate step Per-frame work Tweening custom numbers
Keep hooks thin. Heavy parsing inside get/set or fx.step shows up during animations — cache feature-test results.
Remember
Key Takeaways Role: plug custom get/set into .css() and .animate().
Ready: register hooks inside $(function () { … }).
Units: use $.cssNumber for unitless numbers.
Animate: add $.fx.step.prop for numeric tweens.
One line: cssHooks is the extension point for special CSS properties — register on ready, keep get/set thin.
Frequently Asked Questions What is jQuery.cssHooks? jQuery.cssHooks is an object where you register get and set handlers for CSS property names. When you call .css('prop') or .animate({ prop: value }), jQuery can route through your hook instead of the default style logic.
When should I use cssHooks instead of plain .css()? Use cssHooks for special cases: vendor-prefix normalization, synthetic properties (like a rotateDeg helper), or animation of non-standard values. Everyday color and width changes only need .css().
Why register cssHooks inside $(function(){ ... })? jQuery writes its own cssHooks during document ready and can overwrite hooks registered too early. The official docs recommend wrapping your registration in a ready callback.
How is cssHooks different from cssNumber? cssHooks define how to read and write a property. cssNumber tells jQuery not to auto-append px to numeric setter values — useful for opacity, z-index, or custom degree values.
How do cssHooks work with .animate()? A get/set hook lets animation use that property. For complex values, also add $.fx.step.propName so each frame pushes the tweened number through your setter.
Do I still need cssHooks for vendor prefixes? Rarely for common modern properties. Hooks remain useful for plugins, legacy support, custom properties, and understanding how .css() and .animate() share one extension point.
Next: cssNumber Learn which CSS properties skip the automatic px suffix in jQuery.
cssNumber tutorial → About the author Developer, cloud engineer, and technical writer
I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.
8 people found this page helpful
