获取html的样式属性,如何通过javascript / jQuery从CSS类中获取样式属性？

由于您已经在使用jQuery，请尝试使用jQuery-ui的函数switchClass，该函数允许您为这种新颜色设置动画。

例如：$('div').switchClass( "", "highlight", 1000 );

如果你不想在这里包含整个 UI库，那么他们使用的是代码：switchClass: function( remove, add, speed, easing, callback) {

return $.effects.animateClass.call( this, {

add: add,

remove: remove    }, speed, easing, callback );}

和animateClass fn：var classAnimationActions = [ "add", "remove", "toggle" ],

shorthandStyles = {

border: 1,

borderBottom: 1,

borderColor: 1,

borderLeft: 1,

borderRight: 1,

borderTop: 1,

borderWidth: 1,

margin: 1,

padding: 1

};function styleDifference( oldStyle, newStyle ) {

var diff = {},

name, value;

for ( name in newStyle ) {

value = newStyle[ name ];

if ( oldStyle[ name ] !== value ) {

if ( !shorthandStyles[ name ] ) {

if ( $.fx.step[ name ] || !isNaN( parseFloat( value ) ) ) {

diff[ name ] = value;

}

}

}

}

return diff;}function getElementStyles( elem ) {

var key, len,

style = elem.ownerDocument.defaultView ?

elem.ownerDocument.defaultView.getComputedStyle( elem, null ) :

elem.currentStyle,

styles = {};

if ( style && style.length && style[ 0 ] && style[ style[ 0 ] ] ) {

len = style.length;

while ( len-- ) {

key = style[ len ];

if ( typeof style[ key ] === "string" ) {

styles[ $.camelCase( key ) ] = style[ key ];

}

}

// support: Opera, IE <9

} else {

for ( key in style ) {

if ( typeof style[ key ] === "string" ) {

styles[ key ] = style[ key ];

}

}

}

return styles;}$.effects.animateClass = function( value, duration, easing, callback ) {

var o = $.speed( duration, easing, callback );

return this.queue( function() {

var animated = $( this ),

baseClass = animated.attr( "class" ) || "",

applyClassChange,

allAnimations = o.children ? animated.find( "*" ).addBack() : animated;

// map the animated objects to store the original styles.

allAnimations = allAnimations.map(function() {

var el = $( this );

return {

el: el,

start: getElementStyles( this )

};

});

// apply class change

applyClassChange = function() {

$.each( classAnimationActions, function(i, action) {

if ( value[ action ] ) {

animated[ action + "Class" ]( value[ action ] );

}

});

};

applyClassChange();

// map all animated objects again - calculate new styles and diff

allAnimations = allAnimations.map(function() {

this.end = getElementStyles( this.el[ 0 ] );

this.diff = styleDifference( this.start, this.end );

return this;

});

// apply original class

animated.attr( "class", baseClass );

// map all animated objects again - this time collecting a promise

allAnimations = allAnimations.map(function() {

var styleInfo = this,

dfd = $.Deferred(),

opts = $.extend({}, o, {

queue: false,

complete: function() {

dfd.resolve( styleInfo );

}

});

this.el.animate( this.diff, opts );

return dfd.promise();

});

// once all animations have completed:

$.when.apply( $, allAnimations.get() ).done(function() {

// set the final class

applyClassChange();

// for each animated element,

// clear all css properties that were animated

$.each( arguments, function() {

var el = this.el;

$.each( this.diff, function(key) {

el.css( key, "" );

});

});

// this is guarnteed to be there if you use jQuery.speed()

// it also handles dequeuing the next anim...

o.complete.call( animated[ 0 ] );

});

});};