zoukankan      html  css  js  c++  java
  • JavaScript 之 offset 、client、scroll

    下面这三组是关于元素大小、位置相关的属性

    一、offset 偏移量

      1、offsetParent

        该属性获取距离当前元素最近的定位父元素,如果没有定位父元素此时是 body 元素

      2、offsetLeft / offsetTop

        该属性获取当前元素距离 offsetParent 的横向偏移纵向偏移

      3、offsetWidth / offsetHeight

        该属性获取当前元素的宽高,宽高包括:内容(content)、边框(border)和内填充(padding)

      

      注意:offset 属性 是只读属性

      Demo:

     1 // 结构
     2 <div id="box">
     3     <div id="child">
     4       
     5     </div>
     6 </div>
     7 // 样式
     8   <style>
     9     body {
    10       margin: 0;
    11     }
    12     #box {
    13       position: relative;
    14        300px;
    15       height: 300px;
    16       background-color: red;
    17       overflow: hidden;
    18       margin: 50px;
    19     }
    20     #child {
    21        100px;
    22       height: 100px;
    23       background-color: blue;
    24       margin: 50px;
    25       border: 10px solid yellow;
    26       padding: 10px;
    27     }
    28   </style>
    29 // js
    30 <script>
    31    // 获取子元素的位置和大小
    32     var child = document.getElementById('child');
    33     console.log(child.offsetParent);
    34     // 获取child的位置     offsetLeft 距离offsetParent的横向偏移
    35     console.log(child.offsetLeft);
    36     console.log(child.offsetTop);
    37 
    38     // 获取child的大小   包括边框和padding
    39     console.log(child.offsetWidth);
    40     console.log(child.offsetHeight);
    41 </script>
    View Code

    二、client 客户区大小

      1、clientLeft / clientTop

        该属性是获取当前元素的 border-left、border-right 的宽度。(没有 border-right/border-bottom属性)

      2、clientWidth / clientHeight

        该属性是获取当前元素的宽高,宽高包括:内容(content)和 内填充 (padding)

      

       Demo:

     1 // 结构
     2  <div id="box"> </div>
     3 // 样式
     4  <style>
     5     body {
     6       margin: 0;
     7     }
     8 
     9     #box {
    10        100px;
    11       height: 100px;
    12       margin: 50px;
    13       border: 30px solid red;
    14       padding: 10px;
    15       background-color: green;
    16     }
    17   </style>
    18 // js
    19 <script>
    20     var box = document.getElementById('box');
    21      // clientLeft  是border-left 的宽度
    22     // clientTop    border-top 的宽度
    23     console.log(box.clientLeft);
    24     console.log(box.clientTop);
    25 
    26     // 获取大小   包括padding  但是不包括边框
    27     console.log(box.clientWidth);
    28     console.log(box.clientHeight);
    29 </script>
    View Code

    三、scroll 滚动偏移

       1、scrollLeft / scrollTop

        该属性获取元素内容滚动出去的横向距离 / 纵向距离

      2、scrollWidth / scrollHeight

        该属性获取元素的大小,指的是:内容(content)+ 内填充(padding)和未显示出来的内容

      

       Demo:

     1 // 结构
     2 <div id="box">
     3     Javascript,一种高级编程语言,通过解释执行,是一门动态类型,面向对象(基于原型)的直译语言。它已经由欧洲电脑制造商协会通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、FireFox等)支持。
     4   </div>
     5 // 样式
     6 <style>
     7     body {
     8       margin: 0;
     9     }
    10 
    11     #box {
    12        100px;
    13       height: 100px;
    14       margin: 50px;
    15       border: 30px solid red;
    16       padding: 10px;
    17       background-color: green;
    18       overflow: auto;
    19     }
    20   </style>
    21 // js
    22  <script>
    23     // scroll
    24     var box = document.getElementById('box');
    25     // 当拖动box中的滚动条的时候触发
    26     box.onscroll = function () {
    27       console.log(box.scrollLeft);
    28       console.log(box.scrollTop);
    29     
    30     }
    31     // 内容的大小,包括padding 和未显示的内容,不包括滚动条
    32      console.log(box.scrollWidth);
    33      console.log(box.scrollHeight);
    34 
    35   </script>
    View Code
  • 相关阅读:
    APUE.3源码编译(Ubuntu16.04)
    《UNIX环境高级编程》(第三版)阅读笔记---2018-5-9
    css回归之用户界面
    css回归之文本
    js回归之字符串
    js回归之BOM
    js回归之事件
    百度前端面试总结
    书单
    剑指offer做题收获之一:补码
  • 原文地址:https://www.cnblogs.com/niujifei/p/11451651.html
Copyright © 2011-2022 走看看