zoukankan      html  css  js  c++  java
  • offset、client、scroll、screen的自己理解

    body是DOM对象里的body子节点,即 <body> 标签;

    documentElement 是整个节点树的根节点root,即<html> 标签;

    window.screen.width、window.screen.height、screen.width、screen.height分别表示显示屏幕的宽高,即屏幕的分辨率。

    window.innerHeight、window.innerWidth分别表示浏览器展示页面内容可见的高度和宽度。

    window.outerHeight、window.outerWidth分别表示浏览器的高度和宽度,包括收藏栏等等这些的宽度和高度。

    client

    document.documentElement.clientWidth:浏览器上网页可见内容的宽度。

    document.documentElement.clientHeight:浏览器上网页可见内容的高度。

    document.body.clientWidth:body宽度。

    document.body.clientHeight:body宽度。

    element.clientWidth = 左侧内边距+内容宽度+右侧内边距。

    element.clientHeight = 上侧内边距+内容高度+下侧内边距。

    Offset

    document.documentElement.offsetWidth:表示html的宽度,不包括html的margin和border宽度。

    document.documentElement.offsetHeight:表示html的高度,不包括html的margin和border宽度。

    document.body.offsetWidth:表示body的宽度,不包括body的margin和border宽度。

    document.body.offsetHeight:表示body的高度,不包括body的margin和border宽度。

    element.offsetWidth = 左侧边框宽度+左侧内边距+内容宽度+右侧内边距+右侧边框宽度。

    element.offsetHeight = 上侧边框宽度+上侧内边距+内容高度+下侧内边距+下侧边框宽度。

    offsetParent 返回这个元素的父级元素

    scroll

    document.documentElement.scrollWidth:表示浏览器页面宽度,有滚动条是包括滚动条后面的

    document.documentElement.scrollHeight:表示浏览器页面高度,有滚动条是包括滚动条后面的

    document.documentElement.scrollTop:表示垂直方向滚动条滚动过的距离

    document.documentElement.scrollLeft:表示水平方向滚动条滚动过的距离

    if (window.pageXOffset !== undefined) {  
      // 所有浏览器,除了 IE9 及更早版本 alert("水平滚动距离: " + window.pageXOffset); alert("垂直滚动距离: " + window.pageYOffset); } else {
      // IE9 及更早版本 alert("水平滚动距离: " + document.documentElement.scrollLeft); alert("垂直滚动距离: " + document.documentElement.scrollTop); }

      

    document.body.scrollWidth:当html、body没有marign、border、padding时等于 document.documentElement.scrollWidth

    document.body.scrollHeight当html、body没有marign、border、padding时等于 document.documentElement.scrollHeight

    element.scrollWidth = 左侧内边距+内容宽度+右侧内边距。

    element.scrollHeight = 上侧内边距+内容高度+下侧内边距。

    element.scrollLeft :当父元素宽度小于子元素宽度时,且存在滚动条时,获取父元素上的scrollLeft的滚动条滚动过的距离。

    element.scrollTop :当父元素高度小于子元素高度时,且存在滚动条时,获取父元素上的scrollTop的滚动条滚动过的距离。

     

     

     

     

     

     

     

  • 相关阅读:
    Nginx 变量漫谈
    nginx 常见参数以及重定向参数配置
    Nginx proxy_pass配置
    [效果不错] nginx 高并发参数配置及linux内核参数优化,完整的内核优化设置。PHP-FPM高负载解决办法。
    网页 大文件上传解决方案(500M以上)
    VUE 大文件上传解决方案(500M以上)
    JavaScript 大文件上传解决方案(500M以上)
    JS 大文件上传解决方案(500M以上)
    C#.NET 大文件上传解决方案(500M以上)
    ASP.NET 大文件上传解决方案(500M以上)
  • 原文地址:https://www.cnblogs.com/aidixie/p/10447835.html
Copyright © 2011-2022 走看看