Changing element styling
1.Adding and removing class names
Command syntax:addClass(names)
Adds the specified class name or class names to all elements in the wrapped set
Parameters
names (String) A string containing the class name to add or, if multiple class names are
to be added, a space-delimited string of class names
Returns
The wrapped set
eg: $(a).addClass("classA classB" );// add classA and classB to all the links in the page
Command syntax:removeClass(names)
Removes the specified class name or class names from each element in the wrapped set
Parameters
names (String) A string containing the class name to remove or, if multiple class names
are to be removed, a space-delimited string of class names
Returns
The wrapped set
Command syntax:toggleClass(name)
Adds the specified class name if it doesn’t exist on an element, or removes the name from
elements that already possess the class name. Note that each element is tested individu-
ally, so some elements may have the class name added, and others may have it removed.
Parameters
name (String) A string containing the class name to toggle.
Returns
The wrapped set.
2.Getting and setting styles
Command syntax:css(name,value)
Sets the named CSS style property to the specified value for each matched element.
Parameters
name (String) The name of the CSS property to be set.
value (String|Number|Function) A string, number, or function containing the property value. If a function is passed as this parameter , it will be invoked for each element
of the wrapped set with its return value serving as the value for the CSS property. The this property for each function invocation will be set to the element being evaluated.
Returns
The wrapped set.
eg: $("div.expandable").css("width",function() {
return $(this).width() + 20 + "px";
});//expand the width of all elements in the wrapped set by 20 pixels
Command syntax:css(properties)
Sets the CSS properties specified as keys in the passed object to their associated values for all matched elements
Parameters
properties (Object) Specifies an object whose properties are copied as CSS properties to all elements in the wrapped set
Returns
The wrapped set
Command syntax:css(name)
Retrieves the computed value of the CSS property specified by name for the first element in the wrapped set
Parameters
name (String) Specifies the name of a CSS property whose computed value is to be returned
Returns
The wrapped set
NOTE:Keep in mind that this variant of the css() command always returns a string, so if you need a number or some other type, you’ll need to parse the returned value.
Command syntax:width();height()
Retrieves the width or height of the first element of the wrapped set
Parameters
none
Returns
The computed width or height as a number
3.More useful style-related commands
Command syntax:hasClass(name)
Determines if any element of the matched set possesses the passed class name
Parameters
name (String) The class name to be checked
Returns
Returns true if any element in the wrapped set possesses the passed class name; false if not
eg: $("p:first").hasClass("surpriseMe");//identical to $("p:first").is(".surpriseMe")