Home Web Front-end JS Tutorial A brief analysis of the differences between offsetLeft, Left and clientLeft_Basic knowledge

A brief analysis of the differences between offsetLeft, Left and clientLeft_Basic knowledge

May 16, 2016 pm 05:11 PM
left



Assume obj is an HTML control

obj.offsetTop refers to the calculated upper position of obj relative to the layout or the parent coordinate specified by the offsetParent attribute, integer, unit pixel.

obj.offsetLeft refers to the calculated left position of obj relative to the layout or the parent coordinate specified by the offsetParent attribute, integer, unit pixel.

obj.offsetWidth refers to the absolute width of the obj control itself, excluding the part not displayed due to overflow, that is, its actual width, integer, unit pixel.

obj.offsetHeight refers to the absolute height of the obj control itself, excluding the part that is not displayed due to overflow, that is, the height it actually occupies, integer, unit pixel.

Let’s explain the offsetParent mentioned earlier.

offsetParent Gets a reference to the container object that defines the offsetTop and offsetLeft properties of the object. offsetTop and offsetParent are very complicated, different browsers have different interpretations, and the interpretation is different again, so we generally only need to understand that the absolute position of the control in the browser can be obtained through the two.

The above properties are also valid in FireFox.

In addition: what we are talking about here refers to the attribute value of the HTML control, not document.body. The value of document.body has different interpretations in different browsers (in fact, most environments are due to the It is caused by different interpretations of .body, not by different interpretations of offset)


We know that offsetTop can get the position of the HTML element from the top or outer element, and style.top can also be used. The difference between the two is:

1. offsetTop returns a number, while style.top returns a string. In addition to the number, it also has the unit: px.

2. offsetTop is read-only, while style.top is read-writeable.

3. If the top style is not specified for the HTML element, style.top returns an empty string.

The same is true for offsetLeft and style.left, offsetWidth and style.width, offsetHeight and style.height.


clientHeight
No one has any objection to clientHeight. They all think it is the height of the visible area of ​​the content, which means the height of the area where the content can be seen in the page browser. , generally the area below the last toolbar to above the status bar, has nothing to do with the page content.

offsetHeight
IE and Opera believe that offsetHeight = clientHeight scroll bar border.
NS and FF consider offsetHeight to be the actual height of the web page content, which can be smaller than clientHeight.

scrollHeight
IE and Opera consider scrollHeight to be the actual height of the web page content, which can be smaller than clientHeight.
NS and FF consider scrollHeight to be the height of web page content, but the minimum value is clientHeight.

Simply put
clientHeight is the height of the area where the content is viewed through the browser.
NS and FF believe that offsetHeight and scrollHeight are both web page content heights, but when the web page content height is less than or equal to clientHeight, the value of scrollHeight is clientHeight, and offsetHeight can be less than clientHeight.
IE and Opera believe that offsetHeight is the visible area clientHeight scroll bar plus border. scrollHeight is the actual height of the web page content.

Similarly
The explanations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.

Explanation
The above is based on DTD HTML 4.01 Transitional. If it is DTD XHTML 1.0 Transitional, the meaning will be different. In XHTML, these three values ​​are the same value, and they all represent the actual content. high. Most new versions of browsers support enabling different interpreters based on the DOCTYPE specified on the page

scrollTop is the "scrolled" height value, example:

Copy code The code is as follows:


If scrollTop is set for p, these contents may not be fully displayed.




Since scrollTop is set for the outer element p, the inner element will roll up, and the rolled up part is scrollTop.

scrollLeft is similar.

We already know that offsetHeight is the width of its own element, and scrollHeight is the absolute width of the internal element, including the hidden part of the internal element. In the above, the scrollHeight of p is 300, and the offsetHeight of p is 100.

scrollWidth is similar.

IE and FireFox fully support, while Netscape 8 and Opera 7.6 do not support scrollTop, scrollLeft (except document.body.scrollTop, document.body.scrollLeft).

1.clientHeight, clientWidth:
These two properties roughly display the pixel height and width of the element's content. In theory, these measurements do not take into account any
added through the style sheet Margins, borders, etc. in elements.

2.clientLeft, clientTop:
These two return the thickness of the border around the element. If you do not specify a border or do not position the element, its value is 0.

3.scrollLeft,scrollTop:
If the element is scrollable, you can use these two properties to get how far the element has scrolled in the horizontal and vertical directions, the unit is pixels.
For non-scrollable elements, these values ​​are always 0.

4.scrollHeight,scrollWidth:
No matter how many objects are visible on the page, they get the whole.

5.style.left:
The offset of the positioned element from the left edge of the containing rectangle

6.style.pixelLeft:
Returns the integer pixel value of the left border offset of the positioned element. Because the non-pixel value of the attribute returns a string containing the unit, for example, 30px. Use this attribute to process values ​​in pixels individually.

7.style:posLetf:
Returns the numerical value of the left border offset of the positioned element, regardless of the unit specified by the corresponding style sheet element. Because the non-position value of the attribute returns a value containing Unit string, for example, 1.2em

top, pixelTop, posTop are just some analogies.

LEFT: It is the position moved from left to right, that is, the distance between the widget and the left edge of the screen;

clientLeft Returns the distance between the offsetLeft attribute value of the object and the real value to the left side of the current window

offsetLeft Returns the left value of the object relative to the layout or coordinates of the parent object. It takes the upper left corner of the parent object as the origin of the coordinates, and the x coordinates in the positive direction of the X and Y axes to the right and downwards

pixelLeft Sets or returns the position of the object relative to the left side of the window

scrollWidth is the width of the actual content of the object, excluding the edge width, and will change with the amount of content in the object (too much content may change the object's width) actual width).

clientWidth is the visible width of the object, excluding scroll bars and other edges, and will change with the display size of the window.

offsetWidth is the visible width of the object, including scroll bars and other edges, and will change with the display size of the window.

IE6.0, FF1.06:
clientWidth = width padding
clientHeight = height padding
offsetWidth = width padding border
offsetHeight = height padding border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(Need to mention: the margin attribute in CSS is different from clientWidth , offsetWidth, clientHeight, offsetHeight are irrelevant)

offsetwidth: is the offset width of the element relative to the parent element. Equal to border padding width
clientwidth: is the visible width of the element. Equal to padding width
scrollwidth: is the width of the element and includes the scrolling part.
offsetLeft: The position of the Html element relative to its own offsetParent element
scrollLeft: Return and set the coordinate value of the current horizontal scrolling task

Copy code The code is as follows:


onclick="alert('offsetLeft:' this. offsetLeft)">



Save it as a web page, run it, click the button, the scroll bar moves
Click the div, and the b relative will pop up first At the position of a, the position of a relative to the window pops up
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How do I create and publish my own JavaScript libraries? How do I create and publish my own JavaScript libraries? Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

How do I optimize JavaScript code for performance in the browser? How do I optimize JavaScript code for performance in the browser? Mar 18, 2025 pm 03:14 PM

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

How do I debug JavaScript code effectively using browser developer tools? How do I debug JavaScript code effectively using browser developer tools? Mar 18, 2025 pm 03:16 PM

The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.

How do I use source maps to debug minified JavaScript code? How do I use source maps to debug minified JavaScript code? Mar 18, 2025 pm 03:17 PM

The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack.

Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts Getting Started With Chart.js: Pie, Doughnut, and Bubble Charts Mar 15, 2025 am 09:19 AM

This tutorial will explain how to create pie, ring, and bubble charts using Chart.js. Previously, we have learned four chart types of Chart.js: line chart and bar chart (tutorial 2), as well as radar chart and polar region chart (tutorial 3). Create pie and ring charts Pie charts and ring charts are ideal for showing the proportions of a whole that is divided into different parts. For example, a pie chart can be used to show the percentage of male lions, female lions and young lions in a safari, or the percentage of votes that different candidates receive in the election. Pie charts are only suitable for comparing single parameters or datasets. It should be noted that the pie chart cannot draw entities with zero value because the angle of the fan in the pie chart depends on the numerical size of the data point. This means any entity with zero proportion

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

TypeScript for Beginners, Part 2: Basic Data Types TypeScript for Beginners, Part 2: Basic Data Types Mar 19, 2025 am 09:10 AM

Once you have mastered the entry-level TypeScript tutorial, you should be able to write your own code in an IDE that supports TypeScript and compile it into JavaScript. This tutorial will dive into various data types in TypeScript. JavaScript has seven data types: Null, Undefined, Boolean, Number, String, Symbol (introduced by ES6) and Object. TypeScript defines more types on this basis, and this tutorial will cover all of them in detail. Null data type Like JavaScript, null in TypeScript

See all articles