Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge of what the method of jquery operation element style is, the content is detailed, and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

The methods of operating the style are: 1, css (), you can set the style attributes of the element; 2, height (), you can set the height of the element; 3, width (), you can set the width of the element; 4, attr (), you can operate the style by controlling the id, class, style attributes of the element; 5, addClass (), and so on.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

The method of directly manipulating element style by jquery

The CSS attribute describes the css () setting or returns the style attribute of the matching element. Height () sets or returns the height of the matching element. Offset () returns the position of the first matching element relative to the document. Position () returns the position of the first matching element relative to the parent element. ScrollLeft () sets or returns the offset of the matching element relative to the left side of the scroll bar. ScrollTop () sets or returns the offset of the matching element from the top of the scroll bar. Width () sets or returns the width of the matching element.

1. Css ()

Returns the CSS attribute value syntax:

$(selector) .css (name)

Set the CSS property syntax:

$(selector) .css (name,value)

2. Height ()

Returns a high level of syntax:

(selector) .height ()

Set the syntax for the height:

$(selector) .height (length)

3. Width ()

Returns the syntax of the width:

(selector) .width ()

The syntax for setting the width:

$(selector) .width (length)

Example: manipulate element style-modify element width

1. Use the width () method

$(document) .ready (function () {$("button") .click (function () {$("img"). Width ("200px");})

Modify the width of an element

2. Use the css () method

$(document) .ready (function () {$("button") .click (function () {$("img"). Css ("width", "250px");})

The method of indirect manipulation of element style by jquery

In jquery, you can manipulate element styles indirectly by manipulating element attributes.

The method description addClass () adds the specified class name to the matching element. Attr () sets or returns the properties and values of the matching element. Prop () sets or returns the attribute / value of the selected element removeAttr () removes the specified attribute from all matching elements. RemoveClass () removes all or specified classes from all matching elements. ToggleClass () adds or removes a class from the matching element.

Example: add a style using attr ()

When you use the attr () method to set the style attribute of an element, you can add a css style to the element.

$(document) .ready (function () {$("button") .click (function () {/ / $("div") .attr ({"style": "border: 5px solid paleturquoise;"}); $("div") .attr ("style", "border: 5px solid paleturquoise") Width: 200px; ");});}); hello

Add css styles to div elements

These are all the contents of the article "how jquery manipulates element styles". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.