zoukankan      html  css  js  c++  java
  • 三大家族的作用和区别

    1.offset

      1.1offsetwidth:自身的内容宽度,内容+border+padding

      1.2offsettop:距离最近定位盒子的头部距离

      1.3offsetparent:距离最近定位的父盒子

    2.scroll

      2.1scrolltop:页面被滚动的高

      2.2scrollleft:页面被滚动的左边  

      2.3scrollwidth:页面全文的宽

      2.4scrollheight:页面全文的高

    获取方式:document.body.scrollXX     document.documentElement.scrollXX 

    现在主流获取方式:window.pageXoffset==>scrollleft    window.pageYoffset==>scrolltop

    3.client

      3.1clientwidth:自身内容的宽度,内容+padding(没有border)

      3.2clientleft:返回元素的边框距离

    区别

      1.offsetwidth:自身的内容+border+padding

      2.clientwidth:自身的内容+padding

      3.scrollwidth:页面全文内容宽(包括滚动)

      4.offsettop:距离第一个定位父元素的高

      5.clienttop:返回边框的高

      6.scrolltop:滚动的高

    4.event事件

      1.1.event.clientX:光标相对于网页水平位置

      1.2.event.clientY:光标相对于网页垂直位置

      注意:只想对于当前可视窗口大小,取一屏的大小

      2.1.screeX:光标相对于当前屏幕的水平位置

      2.2.screeY:光标相当于当前屏幕的垂直位置

      注意:包括头部,取得是电脑界面大小

      3.1.pageX:光标相对于文档的水平位置

      3.2.pageY:光标相对于文档的垂直位置

      注意:全部内容,可往下滚动距离

      

      可视窗口大小通用方法:window.innerwidth

  • 相关阅读:
    Promise是如何实现异步编程的?
    js 检测元素是否被覆盖
    antd upload组件结合七牛云上传图片
    webpack原理分析之编写一个打包器
    docker命令构建Java程序镜像,并运行它
    新建mysql docker指定版本
    spring官方文档网址
    rabbitmq用x-delayed-message的exchange特性支持消息延迟消费
    解决Can't open /usr/lib/grub/update-grub_lib
    java8-强大的Stream API
  • 原文地址:https://www.cnblogs.com/ccc0114/p/9916701.html
Copyright © 2011-2022 走看看