Jquery operations CSS style location size method summary

A, CSS,

1, CSS (name)

Access the style attributes of the first matched element.
The return value String
parameter
Name (String) : the name of the property to access
Example:

$("p").css("color"); //Gets the value of the color style property of the first paragraph 

2, CSS (properties)

Sets a name/value pair object to the style attribute of all matched elements. This is the best way to set a number of style attributes on all matched elements.
The return value jQuery
parameter
Properties (Map) : the name/value pair to set to the style property
Example:

//1 set the font color of all paragraphs to red and the background to blue 

$("p").css({ color: "#ff0011", background: "blue" }); 

//If the attribute name contains "-", you must use quotation marks 

$("p").css({ "margin-left": "10px", "background-color": "blue" }); 

3, CSS (name, value)

In all matched elements, set the value of a style attribute. Numbers are automatically converted to pixel values
The return value jQuery
parameter

Name (value) : property name
Value (String, Number) : property value
Example:

$("p").css("color","red"); //Set all paragraph fonts to red 

Second, the position

1, the offset ()

Gets the relative offset of the matching element in the current viewport. The returned object contains two plastic properties: top and left.
Note: this method is only valid for visible elements.
The return value Object {top, left}
Example:

/* 

//Gets the offset of the second segment 

 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:last"); 

var offset = p.offset(); 

p.html("left: " + offset.left + ", top: " + offset.top); 

2, the position ()

Gets the offset of the matched element relative to the parent element.
The returned object contains two plastic properties: top and left. For precise results, use pixel units on the padding, border, and fill properties. This method is only valid for visible elements.
The return value Object {top, left}
Example:

/* 

//Gets the offset of the first paragraph 

 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

var position = p.position(); 

$("p:last").html("left: " + position.left + ", top: " + position.top); 

3, scrollTop ()

Gets the offset of the matched element relative to the top of the scroll bar.
Note: this method works for both visible and hidden elements.
The return value of Integer
Example:

/* 

//Gets the offset of the first paragraph relative to the top of the scroll bar & NBSP; < br / >
 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("scrollTop:" + p.scrollTop()); 

4, scrollTop (val)

When passing a parameter value, set the scroll bar top offset to that value. This method works for both visible and hidden elements.
The return value jQuery
Example:

$("div.demo").scrollTop(300); 

5, scrollLeft ()

Gets the offset of the matched element relative to the left side of the scroll bar. This method works for both visible and hidden elements.
The return value of Integer
Example:

/* 

//Gets the offset & NBSP; from the first paragraph to the left of the scroll bar;     < br / >
 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("scrollLeft:" + p.scrollLeft()); 

6, scrollLeft (val)

When passing a parameter value, set the left offset of the scroll bar to that value. This method works for both visible and hidden elements.
The return value jQuery
Example:

$("div.demo").scrollLeft(300); 

Three, size

1, height ()

Gets the height value (px) currently calculated for the first matched element. After jQuery 1.2 you can use it to get the height of window and document
The return value of Integer
Example:

/* 

//Get the high & NBSP; cake of the first paragraph;       < br / >
 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

alert($("p").height()); 

//Gets the document's height 

alert($(document).height()); 

2, height (val)

Sets the value of the CSS height (hidth) attribute for each matched element. If you do not specify units explicitly (such as em or %), use px. If you do not specify units explicitly (such as em or %), use px.
The return value jQuery
parameter
Val (String, Number) : sets the value of 'height' in CSS
Example:

/* 

//Set the height of all paragraphs to 20& noon; < br / >
 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

$("p").height(20); 

alert($("p").height()); 

3, the width ()

Gets the currently computed width value (px) of the first matched element. After jQuery 1.2 you can use it to get the width of window and document
The return value of Integer
Example: 0

/* 

//Gets the width of the first paragraph 

 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

alert($("p").width()); 

4, width (val)

Sets the value of the CSS width property for each matched element. If you do not specify units explicitly (such as em or %), use px.
The return value jQuery
parameter
Val (String, Number) : sets the property value of CSS 'width'
Example:

/* 

//Set the width of all paragraphs to 20 

 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

$("p").width(20); 

alert($("p").width()); 

5, innerHeight ()

Gets the height of the inner area of the first matched element (including padding, not including the border). This method works for both visible and hidden elements.
The return value of Integer
Example:

/* 

//Gets the inner height of the first paragraph 

 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("innerHeight:" + p.innerHeight()); 

7, innerWidth ()

Gets the inner area width of the first matched element (including padding, not including the border). This method works for both visible and hidden elements.
The return value of Integer
Example:

/* 

//Gets the inner section width of the first paragraph 

 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("innerWidth:" + p.innerWidth()); 

7, outerHeight (options)

Gets the outer height of the first matched element (including padding and borders by default). This method works for both visible and hidden elements.
The return value of Integer
parameter
The options (Boolean) : (false)   When set to true, calculate the margin inside.
Example:

/* 

//Gets the first paragraph outer height 

 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true)); 

8, outerHeight (options)

Gets the outer width of the first matched element (including padding and borders by default). This method works for both visible and hidden elements.
The return value of Integer
parameter
The options (Boolean) : (false)     When set to true, calculate the margin inside.
Example:

/* 

//Gets the first paragraph outer width 

 Document fragment: <p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true)); 

Above is the jQuery operation CSS style, location, size of all the content, is a personal summary, if there is any omission or error, please let us know, this article will continue to update.