• 13 client&offset&scroll


    client&offset&scroll

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta http-equiv="X-U-Compatible" content="IE-edge">
      6     <meta name="viewport" content="width=device-width,initial-scale=1">
      7     <title>client&offset&scroll</title>
      8     <style type="text/css">
      9         #box{
     10             width: 100px;
     11             height: 100px;
     12             position: absolute;
     13             border: 10px solid red;
     14             /*margin: 10px 0px 0px 0px;*/
     15             padding: 40px;
     16         }
     17         .wrap{
     18             width: 300px;
     19             height: 300px;
     20             background-color: green;
     21             position:relative;
     22             top: 5px;
     23             margin-left: 300px;
     24         }
     25         #box2{
     26             width: 200px;
     27             height: 200px;
     28             border: 5px solid red;
     29             position: absolute;
     30             top: 100px;
     31             left: 50px;
     32             padding:2px;
     33         }
     34         </style>
     35 </head>
     36 <body style=" 2000px;height: 2000px;padding:10px;border:1px solid red;">
     37     <div class="box" id="box">
     38         成年人的世界没有容易二字
     39     </div>
     40     <div>
     41         <div class="wrap"><div id="box2">有些人活着就已经竭尽全力!</div></div>
     42     </div>
     43     <div style="height: 100px;background-color: red;"></div>
     44     <div style="height: 100px;background-color: green;"></div>
     45     <div style="height: 100px;background-color: yellow;"></div>
     46     <div style="height: 100px;background-color: blue;"></div>
     47     <div style="height: 100px;background-color: gray;"></div>
     48     <div id='scroll' style=" 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
     49         <p>成年人的世界没有容易二字,有些人活着就已经竭尽全力!</p>
     50         <p>成年人的世界没有容易二字,有些人活着就已经竭尽全力!</p>
     51         <p>成年人的世界没有容易二字,有些人活着就已经竭尽全力!</p>
     52         <p>成年人的世界没有容易二字,有些人活着就已经竭尽全力!</p>
     53         <p>成年人的世界没有容易二字,有些人活着就已经竭尽全力!</p>
     54     </div>
     55 </body>
     56 <script type="text/javascript">
     57     function $(id) {
     58         return document.getElementById(id);
     59     }
     60     //  client
     61     console.log($('box').clientTop); //clientTop 内容区域到边框顶部的距离 ,说白了就是边框border的高度
     62     console.log($('box').clientLeft);//clientLeft 内容区域到边框左部的距离,说白了就是边框border的宽度
     63     console.log($('box').clientHeight);//clientWidth 内容区域+左右padding   可视宽度
     64     console.log($('box').clientWidth);//clientHeight 内容区域+ 上下padding   可视高度
     65     //  屏幕的可视区域
     66     window.onload = function () {
     67         window.onresize = function () {
     68             // document.documentElement 获取的是html标签
     69             // console.log(document.documentElement.clientWidth);
     70             // console.log(document.documentElement.clientHeight);
     71             // // 窗口大小发生变化时,会触发此方法
     72             console.log(document.documentElement.clientHeight);
     73             console.log(document.documentElement.clientWidth);
     74         }
     75     };
     76 
     77     //  offset
     78     window.onload = function () {
     79         console.log($('box2').offsetHeight);  //  占位高  内容+padding+border
     80         console.log($('box2').offsetWidth);  // 占位宽  内容+padding+border
     81         // 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位,那么是以父辈为基准的top值
     82         console.log($('box2').offsetTop);
     83         // 如果盒子没有设置定位 到body的左部的距离,如果盒子设置定位,那么是以父辈为基准的left值
     84         console.log($('box2').offsetLeft);
     85     }
     86 
     87     //scroll
     88     window.onscroll = function () {
     89         console.log('' + document.documentElement.scrollTop);// 页面卷起的高度
     90         console.log('' + document.documentElement.scrollLeft);// 页面卷起的宽度
     91         console.log('' + document.documentElement.scrollHeight);// 包含 border + height + padding
     92         console.log('' + document.documentElement.scrollWidth);// 包含 border + width + padding
     93     }
     94 
     95     $('scroll').onscroll = function () {
     96         console.log(''+$('scroll').scrollTop);
     97         console.log(''+$('scroll').scrollLeft);
     98         console.log(''+$('scroll').scrollWidth);
     99         console.log(''+$('scroll').scrollHeight)  //scrollHeight : 内容的高度+padding
    100     }
    101 
    102 </script>
    103 </html>
  • 相关阅读:
    [自定义服务器控件] 第三步:CheckBoxList。
    Flex构建WebService应用
    ServletActionContext.getRequest().getServletPath()错误的解决方法
    MyEclipse 8.6 安装 SVN 插件
    [转]hibernateHQL总结
    Struts入门实例
    错误:“Cannot load JDBC driver class 'com.mysql.jdbc.Driver”的解决方法
    Target runtime Apache Tomcat v6.0 is not defined.错误解决方法
    错误:“已有打开的与此命令相关联的 DataReader,必须首先将它关闭”的解决方法。
    [转]删除Windows 7 C:/Users/用户名/AppData里面的文件
  • 原文地址:https://www.cnblogs.com/znyyy/p/11095939.html
Copyright © 2020-2023  润新知