If the position of the parent div is defined as relative and the position of the child div is defined as absolute, then the value of the style.left of the child div is relative to the value of the parent div.
This is the same as offsetLeft, the difference is:
1. style.left returns a string, such as 28px, offsetLeft returns a value of 28. If you need to calculate the obtained value, it is more convenient to use offsetLeft.
2. style.left is read-write, offsetLeft is read-only, so to change the position of the div, you can only modify style.left.
3. The value of style.left needs to be defined in advance, otherwise the obtained value will be empty. And it must be defined in html. I have tried it. If it is defined in css, the value of style.left is still empty. This is the problem I encountered at the beginning. I can never get the value of style.left.
offsetLeft can still be obtained without defining the position of the div in advance.
// This function is an operation on an infinitely classified drop-down box. There is only one drop-down box at the beginning. When a value of the drop-down box is selected,
Dynamically generate a select item, and the select item is a subclass, and at the same time, the select box of the subclass must be moved back by 20px;
The code copy is as follows:
function itemtree_cats_change ( selectObj )
The difference between style.left and offsetLeft in JavaScript is as follows:
Today, when I was making a focus carousel picture, I encountered a problem. When using style.left to get the location of the picture, I couldn't get it. You can successfully obtain it by switching to offsetLeft. Although I achieved the effect I wanted, I was still unwilling to accept it. I didn’t find the reason and felt strange. So I opened up the advanced JavaScript programming, looked at all the knowledge points related to style.left and offsetLeft, and made the following comparison.
(I) For the style.left class attribute, the JavaScript advanced program describes it as follows:
Any HTML element that supports the style feature has a corresponding style attribute in JavaScript. This style object is an instance of CSSStyleDeclaration, which contains all style information specified by the style attribute of HTML, but does not contain styles that are stacked with external style sheets or embedded style sheets (the key is in this sentence! That is to say, only the style attribute set to in-line style can be obtained). Any CSS attribute specified in the style attribute will be represented as the corresponding attribute of this style object.
(II) For offsetLeft cumulative properties:
offsetLeft: The pixel distance between the left outer border of the element and the left inner border of the element containing the element.
offsetTop: The pixel distance between the upper outer border of the element and the upper inner border of the element containing the element.
Through reading books and the problems encountered today, the following summary of style.left and offsetLeft are made
Similarities
1. style.left and offsetLeft are both values relative to their parent element.
Differences
1. style.left returns a string with px; offsetLeft returns a numeric value.
2. What can be read in style.left can also be configured; offsetLeft can only be read but not configured.