Skip to content
Permalink
Browse files

First look at css hooks. These hooks provide a way to change how jQue…

…ry handles getting and setting certain css properties. This means normalizing properties like background-position can easily be done via plugins.

They are similar in concept to the special event hooks. Return false from the hook to revert control back to jQuery's normal processes for getting and setting certain css properties.
  • Loading branch information...
brandonaaron committed Sep 3, 2010
1 parent 97cbd76 commit 65b24861bc2e5f25b08373b2c5afdf15d3256e90
Showing with 54 additions and 32 deletions.
  1. +54 −32 src/css.js
@@ -25,7 +25,7 @@ jQuery.fn.css = function( name, value ) {
if ( value === undefined ) {
return jQuery.curCSS( elem, name );
}

if ( typeof value === "number" && !rexclude.test(name) ) {
value += "px";
}
@@ -35,22 +35,30 @@ jQuery.fn.css = function( name, value ) {
};

jQuery.extend({
style: function( elem, name, value ) {
// don't set styles on text and comment nodes
if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ) {
return undefined;
}

// ignore negative width and height values #1599
if ( (name === "width" || name === "height") && parseFloat(value) < 0 ) {
value = undefined;
}
cssHooks: {
opacity: {
get: function( elem, force ) {
var style = elem.style;
if ( jQuery.support.opacity && !style.filter ) {
return false; // move along, nothing to see here
}

// IE uses filters for opacity
var ret = ropacity.test(elem.currentStyle.filter || "") ?
(parseFloat(RegExp.$1) / 100) + "" :
"";

return ret === "" ?
"1" :
ret;
},

set: function( elem, value ) {
var style = elem.style;
if ( jQuery.support.opacity && !style.filter ) {
return false; // move along, nothing to see here
}

var style = elem.style || elem, set = value !== undefined;

// IE uses filters for opacity
if ( !jQuery.support.opacity && name === "opacity" && style.filter ) {
if ( set ) {
// IE has trouble with opacity if it does not have layout
// Force it by setting the zoom level
style.zoom = 1;
@@ -60,21 +68,42 @@ jQuery.extend({
var filter = style.filter || jQuery.curCSS( elem, "filter" ) || "";
style.filter = ralpha.test(filter) ? filter.replace(ralpha, opacity) : opacity;
}
}
},

style: function( elem, name, value ) {
// don't set styles on text and comment nodes
if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ) {
return undefined;
}

return style.filter && style.filter.indexOf("opacity=") >= 0 ?
(parseFloat( ropacity.exec(style.filter)[1] ) / 100) + "":
"";
// ignore negative width and height values #1599
if ( (name === "width" || name === "height") && parseFloat(value) < 0 ) {
value = undefined;
}

var style = elem.style || elem, set = value !== undefined;

// Make sure we're using the right name for getting the float value
if ( rfloat.test( name ) ) {
name = styleFloat;
}

name = name.replace(rdashAlpha, fcamelCase);

var hooks = jQuery.cssHooks[name] || {};

if ( set ) {
style[ name ] = value;
if ( !('set' in hooks) || hooks.set( elem, value ) === false ) {
style[ name ] = value;
}
}

if ( 'get' in hooks ) {
var cssHookReturn = hooks.get( elem, false );
if ( cssHookReturn !== false ) {
return cssHookReturn;
}
}

return style[ name ];
@@ -98,24 +127,17 @@ jQuery.extend({
},

curCSS: function( elem, name, force ) {
var ret, style = elem.style, filter;

// IE uses filters for opacity
if ( !jQuery.support.opacity && name === "opacity" && elem.currentStyle ) {
ret = ropacity.test(elem.currentStyle.filter || "") ?
(parseFloat(RegExp.$1) / 100) + "" :
"";

return ret === "" ?
"1" :
ret;
}
var ret, style = elem.style, filter, hooks = jQuery.cssHooks[name] || {};

// Make sure we're using the right name for getting the float value
if ( rfloat.test( name ) ) {
name = styleFloat;
}

if ( 'get' in hooks && ( ret = hooks.get( elem, force ) ) !== false ) {
return ret;
}

if ( !force && style && style[ name ] ) {
ret = style[ name ];

0 comments on commit 65b2486

Please sign in to comment.
You can’t perform that action at this time.