DOM operation 5 in jQuery Development

DOM operation 5 in jQuery Development

CSS-DOM operation

The CSS-DOM technique is simply to read and set various attributes of a style object. In jQuery, you can directly use the css () method to obtain the style attributes of an element. The jQuery sample code is as follows:

$ ("P" ).css ("color"); // get

Style Color of the element

Whether the color attribute is imported by external css or directly spliced into HTML elements (Inline), the css () method can obtain the values of other attributes in the attribute style.

The code for setting a single style attribute using the css () method is as follows:

$("p").css("color","red");

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

$("p").css({"fontsize":"30px","backgroundolor":"#888888"});

Note:
(1) A number is automatically converted to a pixel value.
(2) In the css () method, if the attribute contains the "-" symbol, such as font-size and background-color, and if the value of these attributes is set, if no quotation marks are required, you can also leave no quotation marks. However, it is recommended that you put them in quotation marks to develop a good writing habit.

There is another method in jQuery to obtain the height () method of the element. The sample code is as follows:

$("p").height()；

You can also set the height of the element. The sample code is as follows:

$ ("P"). height (100); // height 100 pixels $ ("p"). height ("100em"); // height 100em

Note:
(1) The height () method after jQuery1.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 ", it is also possible to get a string like "10px", while the height () method gets the actual height of the element in the page, which 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 (px) of the matching element ).

1, 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.
The jQuery sample code is as follows:

Var offset = $ ("p"). offset (); var left = offset. left; // get the left offset var top = offset. top; // get the top offset

2, 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. The returned object contains two attributes: top and left.
The jQuery sample code is as follows:

var position = $("p").position();var left = position.left;var top = position.top;

3. scrollTop () and scrollLeft () Methods
The two methods are used to obtain the distance from the top and left of the element's scroll bar.
The jQuery sample code is as follows:

Var $ p = $ ("p"); var left = $ p. scrollLeft (); obtain the distance from the element's scroll bar to the left var top = $ p. scrollTop (); obtain the distance from the meta's scroll bar to the top

You can also set a parameter to control the scroll bar of an element to scroll to the specified position.
The jQuery sample code is as follows:

$ ("Textarea "). scrollTop (300); // the scroll bar of the element vertically scrolls to the specified place $ ("textarea "). scrollLeft (300); // the scroll bar of the element horizontally scrolls to the specified place