Home > Others

Differences in js such as scrollHeight, scrollWidth, scrollLeft, and scrolltop

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> js seat representation </title>
<Script type = "text/javascript">
Function testClick (oDiv ){
Var oDivId = document. getElementById (oDiv );
Alert ("offsetHeight:" + oDivId. offsetHeight + "\ n offsetWidth:" + oDivId. offsetWidth + "\ n offsetLeft:" + oDivId. offsetLeft + "\ n offsetRight:" + oDivId. offsetLeft + "\ n offsetTop:" + oDivId. offsetTop
+ "\ N offsetParent:" + oDivId. offsetParent + "\ n scrollHeight:" + oDivId. scrollHeight + "\ n scrollWidth:" + oDivId. scrollWidth + "\ n scrollTop:" + oDivId. scrollTop + "\ n scrollLeft:" + oDivId. scrollLeft + "\ n ");
}
</Script>
</Head>
<Body style = "margin: 0; padding: 0;">
<Div style = "width: 300px; height: 300px; padding: 2px; margin: 3px;">
<Div id = "t1" style = "margin: 1px; padding: 4px; border: 3px solid # eeeeee; width: 100px; height: 200px; overflow: scroll; cursor: pointer; "onclick =" testClick ('t1') ">
Generally, you can drag data by using mousedown, mousemove, or mouseup, and work only on a computer device with a normal keyboard and mouse. On ios devices (iphone itouch ipad), it cannot work. Recently, I had to watch the webkit browser touch event because I needed to support ios devices.
In fact, it is quite simple. The touch events corresponding to mousedown, mousemove, and mouseup are touchstart, touchmove, and touchend. It took a lot of time to write a demo, so in order to save time, I will not talk much about it in the article, just paste the relevant code.
</Div>
</Div>
</Body>
</Html>

Ie (ie9, chrome, ff are basically the same:
OffsetHeight (returns the height and width of the element, in pixels, including the padding ):
200 + 4 + 4 + 3 + 3 = 214 (Self 200 height + top and bottom 4 padding + top and bottom 3 border, note that the margin is not included)
OffsetWidth (returns the height and width of the element, in pixels, including the padding ):,
100 + 3 + 3 + 4 + 4 = 114 same as above
OffsetLeft (returns the offset from the left boundary of the current element to its left boundary containing the element, in pixels ):
2 + 3 + 1 = 6 (3 in ie6) (the left margin of the parent div is 2 + the left margin of the parent div + 3 + the left margin of the Child div + 1, note that the inner margin of the sub-div does not affect offsetLeft)
There is no concept of offsetRight.
OffsetTop (returns the offset from the upper boundary of the current element to the upper boundary of its contained element, in pixels .)
2 + 3 + 1 = 6 (ie6 is 2) the same principle as offsetLeft
ScrollHeight (returns the complete height and width of the element, in pixels. When an element has a scroll bar (for example, due to the overflow: scroll attribute of CSS, if it is hidden, only the height that can be seen by the text is displayed)
474 (the actual height of the div is determined by the text in it, overflow: scroll)
If overflow: hidden, only 390 is available, and others are hidden.
If overflow is called, it is 390. Why is overflow: scroll equal to 474? Because it also contains the height of the scroll bar
ScrollWidth: (same as scrollheight)
Overflow: the value of hidden is 108 (the actual width of the sub-div)
Overflow: the scroll value is 90 (why does this happen here? Does it not include the width of the scroll bar ?)
Remove overflow. The value is 108.
Scrolltop (returns the number of workers that have rolled to the left or upper boundary of the element. These pixels are useful only when the element has a scroll bar, for example, when the CSS overflow attribute of the element is set to auto. These attributes are defined only on the <body> or If you do not drag the scroll bar, the default value is 0;
ScrollLeft same as above

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
compare two excel files and highlight differences apple watch series 1 and 2 differences time and date as using node js as web server date in as sign in as root app js in node js

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More