Operate the style attribute of an element using jquery

The style attribute is very useful, but the biggest disadvantage is that it cannot be used to extract the style information set through external CSS. However, in jquery, these are very simple.

The CSS-DOM technique is simply to read and set various attributes of a style object.

 

You can directly use the CSS () method to obtain the style attributes of an element. The jquery code is as follows:

1	$("p").css("color");  // Obtain the style color of the P element

No matter whether the color attribute is imported by external CSS or directly spliced in HTML elements (Inline), the CSS () method can obtain the values of other attributes in the attribute style.

You can also directly use the CSS () method to set a single style of an element, for example:

1	$("p").css("color","red");  // Set the style color of the P element to red.

Like the ATTR () method, the CSS () method can also set multiple style attributes at the same time. The Code is as follows:

1	// Set both the font size and background color.

2	$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"})；

If the value is a number, it is automatically converted to a pixel value. In the CSS () method, if the attribute contains the "-" symbol, such as the font-size and background-color attributes, if the value of these attributes is set without quotation marks, the code above should be written in the camper format. If the code above is enclosed in quotation marks, it can be written as "font-size" or "fontsize ". In short, it is recommended that you add quotation marks to form a good habit.

You can directly use the opacity attribute to set transparency. jquery has already handled compatibility issues. The following code shows how to set the transparency of the P element to translucent:

1	$("p").css("opacity","0.5");

To obtain the height attribute of an element, use the following jquery code:

1	$(element).css("height");

In jquery, there is another way to obtain the height of an element, that is, height (). It is used to obtain the current calculated height (PX) of the matching element ):

1	$("p").height();    // Obtain the height of the P element

The height () method can also be used to set the height of an element. If the passed value is a number, the default unit is PX. If you want to use another unit (such as em), you must pass a string. The jquery code is as follows:

1	$("p").height("100px"); // Set the height of the P element to l00px

2	$("p").height("2em");   // Set the height of the P element to 2em.

1. The height () method after jquery L.2 can be used to obtain the height of the window and document.
2. The difference between the two is that the height value obtained by the CSS () method is related to the style setting, and may get "Auto" or a string like "10px", while the height () method () the height value obtained by the method is the actual height of the element on the page. It is irrelevant to the style setting and does not contain the unit.

There is also a width () method corresponding to the height () method, which can obtain the width value (PX) of the matching element ).

1	$("p").width()； // Obtain the width of the P element.

Similarly, the width () method can also be used to set the width of an element.

1	$("p").width("400px");   // Set the width of the P element to 400px.

Offset () method

It is used to obtain the relative offset of an element in the current window. The returned object contains two attributes: Top and left, which are only valid for visible elements. For example, use its meter to get the offset of the P element:

1	var offset = $("p").offset();   // Obtain the offset () of the P element ()

2	var left = offset.left;   // Obtain the left offset.

3	var top =  offset.top;    // Get the right offset

Position () method

It is used to obtain the relative offset of an element relative to the last position style attribute set to relative or absolute's grandfather node. Like offset (), the returned object also includes two attributes, that is, top and left. The jquery code is as follows:

1	var position = $("p").position();    // Obtain the position () of the P element ()

2	var left = position.left;    // Obtain the left offset.

3	var top = position.top;    // Get the right offset

Scrolltop () and scrollleft () Methods

The two methods are used to obtain the distance between the element's scroll bar from the top and the left. For example, use the following code to obtain the scroll bar distance of the P element:

1	var $p =  $("p");

2	var scrollTop = $p.scrollTop();    // Obtain the distance from the top of the element's scroll bar

3	var scrollLeft = $p.scrollLeft()；    // Obtain the distance of the element's scroll bar from the left

In addition, you can specify a parameter for the two methods to control the scrolling of the elements to the specified position. For example, use the following code to control the scroll bar in the element to scroll to the top 300 and left 300:

1	$("textarea").scrollTop (300);    // Scroll the vertical scroll bar of an element to the specified position.

2	$("textarea").scrollLeft (300); // Scroll the horizontal scroll bar of the element to the specified position.