What does offset in js mean and its detailed explanation?

offset means "deviation, displacement" and belongs to a series of attributes in js, including "offsetHeight", "offsetWidth", "offsetLeft", "offsetTop", and "offsetParent"; they can be used for Get the element size.

offset family

1, offsetWidth offsetHeight gets the width and height of the object (their own width and High)

offsetWidth = width + border + padding;
        offsetHeight = height + border + padding;
        p.style.width  只能得到行内样式的数值

2, offsetLeft and offsetTop return the left and top positions from the superior box (with positioning),

If the parent does not have positioning, the body shall prevail, here The parent refers to all the previous levels, not just the father,

offsetLeft starts from the father's padding, the father's border is not counted

3, animation easing formula

    var start=0,  end = 0;
        setInterval(function(){
                start = start + (end - start)/10;
        }, 30);

4, offsetParent returns the parent of the object (parent with positioning) similar to parentNode. When there is no positioning, returns body

Difference: parentNode must be the father, offsetParent can be the father, Grandpa et al

5, the difference between offsetTop, offsetLeft and style.top, style.left

5.1 offsetTop, offsetLeft can be the distance from the top or left side of the unpositioned box

5.2 style.top, style.left Only the positioned box has top or left

5.3 offsetTop returns a number, while style.top returns a string, except In addition to numbers, there are units: px

5.4 offsetTop is read-only, while style.top can be read and written

5.5 If the top style is not specified for the html element, then style .top returns an empty string

5.6 style.width You can only get the value of the inline style

Related recommendations:

php Solution to the bypass vulnerability caused by the offset feature

Instance analysis of offset and uniform motion in JS

Sql optimization with excessive offset when paging mysql Example sharing

The above is the detailed content of What does offset in js mean and its detailed explanation?. For more information, please follow other related articles on the PHP Chinese website!