Changing element styling

最新推荐文章于 2024-07-22 00:24:53 发布

原创最新推荐文章于 2024-07-22 00:24:53 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用jQuery进行元素的样式操作，包括添加、删除和切换类名的方法，设置和获取CSS属性的方式，以及检查元素是否拥有特定类名的功能。

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