The three major families of JS (Offset, Scroll, Client) and their compatibility

1. The Offset family

A member of the offset family, the values ​​obtained are all rounded values, which represent displacements
such as :

div.style.left = "156.4px";
//当获取div的offsetLeft值时，将值进行四舍五入
console.log(div.offsetLeft);//将会得到——156
div.style.left = "156.7px";
//当获取div的offsetLeft值时
console.log(div.offsetLeft);//将会得到——157

1. The five members of Offset:

• offsetWidth（width+border+padding）

  Indicates the width of the element after removing the margin (excluding margin)

• offsetHeight（height+border+padding）

  Indicates the height of the element after removing the margin (excluding margin)

  

• offsetLeft

  Indicates the left value of the parent with positioning (if there is no positioning, the body is used as a reference)

• offsetTop

  Indicates the top value of the distance from the positioned parent (if there is no positioning, the body is used as the reference)

• offsetParent

  Returns the positioned parent (or body if not positioned)

2. The difference between offsetLeft and style.left

1. (biggest difference)
   
   • offsetLeft can return the position to the left of the unpositioned box (returns the left value of the parent box with positioning).
   • If there is no positioning in the parent box, the body shall prevail.
   • style.left can only get the value of the inline style, not the left value in CSS or JS, if there is no return an empty string.

2. return value

   • offsetTop returns a number, while style.top returns a string
   • In addition to the number with a unit: px.
   • For example: div.offsetLeft = 100; div.style.left = "100px";

3. offsetTop is read-only, while style.top is read-write.

   • style.left and style.top can be assigned values ​​and can get values
   • offsetLeft and offsetTop can only get values

4. If no top style has been specified for the HTML element, style.top returns the empty string.

2. The scroll family

1. Members of the scroll family:

• scrollWidth: Indicates the width of the box with the border removed

  • scrollWidth=width+padding

• scrollHeight

  • ① When the box content exceeds the height of the box, scrollHeight=height of the box content

  • ② When the height of the box content <= the height of the box, scrollHeight = the height of the box

• scrollTop 和 scrollLeft

  • ① scrollTop represents the header of the page that is obscured by the browser

    How many pixels the page is swiped down

  • ② scrollLeft represents the left part of the page that is obscured by the browser

    How many pixels the page is swiped to the right

//利用window.onscroll来获取
window.onscroll = function () {
    document.title = document.body.scrollTop+"     "+document.body.scrollLeft;
}

2. Compatibility between scrollTop and scrollLeft

• 1. Undeclared DTD (Google only knows him)

document.body.scrollTop;

• 2. DTD has been declared (IE678 only knows him)

 document.documentElement.scrollTop;

• 3. Supported by Firefox/Google/IE9+ or above

window.pageYOffset;

E.g:

// 没有dtd约束的
document.title = document.body.scrollTop;
//有dtd约束的
document.title = document.documentElement.scrollTop;

3. Compatible writing

document.title = window.pageYOffset ||document.body.scrollTop ||document.documentElement.scrollTop;

4. Supplement: usage of compatMode

Used to determine whether the page has DTD

• DTD declared -- compatMode==CSS1Compat
• DTD not declared - compatMode==BackCompat

alert(document.compatMode);//判断页面是否有dtd

5. The window.scrollTo() method scrolls the content to the specified coordinates.

Format:

scrollTo(xpos,ypos);
//xpos  必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
//ypos  必需。要在窗口文档显示区左上角显示的文档的 y 坐标

6. Encapsulation of scroll() method

function scroll() {
 //直接return一个json对象
   return {
       "left":window.pageXOffset || document.documentElement.left || document.body.scrollLeft,
       "top":window.pageYOffset || document.documentElement.top || document.body.scrollLeft
   };
}

When calling, just use scroll().top and scroll().left to get the value.

3. The client family

1. clientY and clientX represent the coordinates of the mouse in the visible area

• clientX: the distance between the mouse and the left side of the visible area (event call)
• clientY: The distance between the mouse and the upper side of the visible area (event call)

2. Key points: clientWidth and clientHeight (different callers have different meanings)

• clientWidth: Get the width of the visible area of ​​the web page

• clientHeight: Get the height of the visible area of ​​the web page

  1. Box call: padding+(width/height)
  2. body/html call: Indicates the size of the browser's visible area

3. clientTop and clientLeft represent the width and height of the border of the box

4. Special usage of the client family: Detect the width/height of the browser (viewable area)

//获取浏览器可视区域的宽高的兼容性写法
function client() {
    if(window.innerHeight !== undefined){
        return {
            "height":window.innerHeight,
            "width":window.innerWidth
        }
    }else if(document.compatMode == "CSS1Compat"){
        return {
            "height":document.documentElement.clientHeight,
            "width":document.documentElement.clientWidth
        }
    }else {
        return {
            "height":document.body.clientHeight,
            "width":document.body.clientWidth
        }
    }
}

5. Difference between pageY and screenY and clientY

• 1.event.pageY

  Indicates the top value from the top of the body when the position is clicked

• 2.event.screenY

  Indicates the position of the click from the top of the screen. When the browser window is moved or zoomed, the event.screenY value will change with it.

• 3.event.clientY

  Indicates the top value of the clicked position from the browser's visible area

6. (Supplementary knowledge) onresize() event

Whenever the size of the browser changes, the event will be
triggered window.onresize()

7. (Supplementary knowledge) Obtain screen width and height (resolution)

Get the resolution of the device being used

• window.screen.width: the width of the screen
• window.screen.height: the height of the screen