Detailed explanation of the usage and differences between style.left and offsetLeft in JavaScript

  • 2021-06-28 08:24:01
  • OfStack

If the position of the parent div is defined as relative and the position of the child div is defined as absolute, then the style.left of the child div is the value relative to the parent div.
This is the same as offsetLeft, except that:

1. style.left returns a string, such as 28px, offsetLeft returns a value of 28, and offsetLeft is more convenient if you need to calculate the value you get.

2. style.left is read-write, offsetLeft is read-only, so to change the location of div, you can only modify style.left.

3. The value of style.left needs to be defined beforehand, otherwise the value is empty.And it has to be defined in html. I've done some experimentation. If it's defined in css, the value of style.left is still empty, which is the problem I was just starting to encounter. I can't always get the value of style.left.

offsetLeft is still accessible without having to define the location of div in advance.

//This function operates on a drop-down box for an infinite classification, with only one drop-down box at the beginning of the page. When one value of the drop-down box is selected,
Dynamically generate an select whose item is a subcategory and move the select box of the subcategory back by 20px.


function itemtree_cats_change ( selectObj )

The differences between style.left and offsetLeft in JavaScript are as follows:

Today, when I was making a focus rotation map, I encountered a problem that I couldn't get the location of the picture using style.left.Switch to offsetLeft to get it.Although I have achieved the effect I want, I am not satisfied with it. It is strange that I don't find the reason, so I turn on the JavaScript advanced program design, and have a look at the style.left and offsetLeft related knowledge points, making the following comparison.

(1) For style.left class attributes, the JavaScript advanced program is described as follows:

Any HTML element that supports the style attribute has a corresponding style attribute in JavaScript.This style object is an instance of CSSStyleDeclaration and contains all the style information specified by the style attribute of HTML, but it does not contain styles cascaded with external or embedded stylesheets (that's the key!That is, only the style attribute set to inline style can be obtained).Any CSS property specified in the style attribute will behave as the corresponding property of this style object.

(2) For the offsetLeft cumulative attribute:

offsetLeft: The pixel distance between the left outer border of an element and the left inner border of the containing element.

offsetTop: The pixel distance between the upper outer border of an element and the upper inner border of the containing element.

Through reading books and problems encountered today, the following summary is made for style.left and offsetLeft

Same point

1. style.left and offsetLeft are values relative to their parent elements.

Difference

1. style.left returns a string with px;offsetLeft returns a numeric value.

2. Readable and configurable when style.left;offsetLeft can only read and cannot be configured.


Related articles: