jquery Action on CSS

Source: Internet
Author: User

1.css
Get the color of P:
$ (document). Ready (function () {
var p= $ ("P"). CSS ("color");
Alert (p);
});
Sets the color of the paragraph font to red:
$ (document). Ready (function () {
$ ("P"). CSS ("Color", "red");
});
Sets the color of the paragraph font to red and the background color to blue:
$ (document). Ready (function () {
$ ("P"). CSS ({color: "Red", Background: "Blue"});
});

<body>
<div>test1</div>
<div id= "D" >test2</div>
<input type= "text" value= "textbox"/>
<input type= "Submit"/>
<p>p</p>
</body>

2. Location
Offset () Gets the relative offset of the matching element at the current viewport. The returned object contains two integer properties: Top and left. This method is valid only for visible elements.
Get the location of the P2 paragraph:
$ (document). Ready (function () {
var p=$ ("P:last");
P.html ("Left:" + P.offset (). Left + ", top:" + P.offset (). top);
});
Set the position of the P2 paragraph:
$ (document). Ready (function () {
$ ("P:last"). Offset ({top:150,left:20});
});

Position () Gets the offset of the matching element relative to the parent element. The returned object contains two integer properties: Top and left.
Gets the position offset of the first paragraph relative to the second paragraph:
$ (document). Ready (function () {
var p=$ ("P:first");
$ ("P:last"). HTML ("Left:" +p.position (). left+ ", Top:" +p.position (). top);
});
ScrollTop () Gets the offset from the top of the scrollbar relative to the element
Gets the offset from the top of the first paragraph relative to the scroll bar
$ (document). Ready (function () {
var p=$ ("P:first");
$ ("P:last"). Text ("ScrollTop:" +p.scrolltop ());
});
ScrollLeft () Gets the offset to the left of the matching element relative to the scrollbar.

<body>
<div>test1</div>
<div id= "D" >test2</div>
<input type= "text" value= "textbox"/>
<p>p1</p>
<p>p2</p>
</body>

3. Dimensions

Height () Gets, sets the height of the element, width () gets, sets the length of the element
$ (document). Ready (function () {
$ ("P:last"). Text ("P2 Height:" +$ ("P:last"). Height ());
});
Set the height of the P2:
$ (document). Ready (function () {
$ ("P:last"). Height (30);
});

The inner area height of the innerheight () element (including padding, excluding borders). The width of the inner area of the innerwidth () element (including padding, excluding borders).
$ (document). Ready (function () {
var p = $ ("P:first");
$ ("P:last"). Text ("Innerheight:" + p.innerheight ());
});
Outerheight () Gets the outer height of the matched element (including padding and borders by default). Outerwidth () Gets the outer width of the matched element (including padding and borders by default).
$ (document). Ready (function () {
var p = $ ("P:first");
$ ("P:last"). Text ("Outerwidth:" + p.outerwidth ());
});

jquery Action on CSS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.