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")