zoukankan      html  css  js  c++  java
  • DOM之元素定位

    JS实现的大多数特效都需要定位元素,而定位元素不外乎以下几类属性:offset、client、scroll。通过合理使用这些属性,即可轻松实现各种JS动态效果了。

    一  offset类

      offset 即元素偏移量,该类属性主要用来动态的获取元素的偏移和大小等。

      1,距离父元素的偏移

        offsetParent:获取有定位属性的父元素。

        offsetTop / offsetLeft:获取元素距离有定位的父元素(上/左边框)的偏移量。如果没有带定位属性的父元素,那么以 body (浏览器可视区)为准。

      HTML代码:

     1 <style>
     2     .father{
     3         position:relative;
     4         top:100px;
     5         left:150px;
     6         width:200px;
     7         height:200px;
     8     }
     9     .son{
    10         width:50px;
    11         height:50px;
    12         margin-top:20px;
    13         margin-left:30px;
    14     }
    15 </style>
    16 <div class="father">
    17     <div class="son"></div>
    18 </div>

      JS代码:

    1 var f = document.querySelector('.father'),
    2      s =document.querySelector('.son');
    3 
    4 s.offsetParent; //div.father
    5 s.offsetTop; //20
    6 s.offsetLeft: //30
    7 //注意:offset 返回的数字,没有单位

      2,自身的宽高

        offsetWidth / offsetHeight

    1 s.offsetWidth; //80
    2 s.offsetHeight; //70
    3 //注意:offsetWidth/Height获取的是元素 content+padding+border的尺寸,不包含margin

      这两个属性获取的是元素在页面是中的绝对宽高,不包含被 overflow 属性隐藏的内容部分。

      

      3,动态性

      所谓动态的获取,是指:当我们 CSS 使用百分比,em 或者 rem 作为单位时,随着屏幕尺寸的变化,元素的实际大小也会随着变化,然而该属性依然能够正确的计算出元素的实际尺寸。

     1 <style>
     2     div{
     3         width:80%;
     4     }
     5 </style>
     6 <body>
     7     <div></div>
     8     <script>
     9         var oDiv = document.querySelector('div');
    10         oDiv.offsetWidth;//会动态的返回元素的宽度
    11     </script>
    12 </div>

    二  client类

      client 系列属性用于获取元素可视区域相关信息,它可以动态的获取元素的边框大小,元素大小等。

      HTML 部分:

     1 <style>
     2     div{
     3         width:400px;
     4         height:400px;
     5         border:10px solid #ccc;
     6         margin:20px;
     7         padding:30px;
     8     }
     9 </style>
    10 <body>
    11     <div></div>
    12 </body>

      1,边框大小

      通过 clientTop / clientLeft 获取元素上边框/左边框大小。

    1 var oDiv = document.querySelector('div');
    2 oDiv.clientTop; //10
    3 oDiv.clientLeft; //10
    4 //返回数字,不带单位

      JS 只提供了获取上边框和左边框大小的方法,如果想获取下边框和有边框的大小,需要做做减法了:offset 宽高减去左或上边框,再减去下面将要讲到的可视区大小。

      2,可视区大小

      通过 clientWidth / clientHeight 获取元素可视区大小,包含内容区和 padding,不包含 border 和 margin。

    1 oDiv.clientWidth; //460
    2 oDiv.clientHeight; //460

    三  scroll

      scroll 类属性用于动态获取元素内容区实际大小,及当元素内容超出盒子大小并出现滚动条时,元素滚动的距离。

      HTML 部分:

     1 <style>
     2     .wrap{
     3         500px;
     4         height:800px;
     5         overflow:scroll;
     6     }
     7     .content{
     8         800px;
     9         height:2400px;
    10     }
    11 </style>
    12 <body>
    13     <div class="wrap">
    14         <div class="content"><div>
    15     </div>
    16 </body>

       内容区放置的 div 超出了父元素的大小,设置 overflow:scroll 属性,使父元素出现滚动条。

      1,滚动距离

      scrollTop / scrollLeft 用于获取元素往下和 往右滚动的距离(出现滚动条时)。

    1 element.scrollTop;
    2 element.scroolLeft;
    3 //当元素内容区出现滚动条时,可以使用他们获取滚动距离
    4 window.pageXOffset;
    5 window.pageYOffset;
    6 //当整个页面出现滚动条时,可以使用这两个属性获取页面的滚动距离

      

      2,实际内容区大小

      scrollWidth / scrollHeight 用于获取元素内容区实际的宽高,包含内容区和 padding,不包含 border 和 margin。即使内容区被 overflow 隐藏,该属性依然能正确获取到实际大小。

    1 var wrap = document.querySelector('.wrap');
    2 wrap.scrollWidth; //800
    3 wrap.scrollHeight; //2400

      

      通过 scroll 类属性可以轻松实现自定义滚动条的功能。

  • 相关阅读:
    WRF WPS预处理
    CVS安装
    Linux窗口最小化消失,任务栏上无法找到的解决方法
    NCARG安装配置出现error while loading shared libraries: libg2c.so.0问题额解决办法
    Netcdf安装
    Embedding R-generated Interactive HTML pages in MS PowerPoint(转)
    The leaflet package for online mapping in R(转)
    Some 3D Graphics (rgl) for Classification with Splines and Logistic Regression (from The Elements of Statistical Learning)(转)
    What does a Bayes factor feel like?(转)
    Weka算法介绍
  • 原文地址:https://www.cnblogs.com/ruhaoren/p/11394305.html
Copyright © 2011-2022 走看看