十六、client、offset、scroll系列

1、client系列

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box{

                width: 200px;

                height: 200px;

                position: absolute;

                border: 10px solid red;

                /*margin: 10px 0px 0px 0px;*/

                padding: 80px;

            }

        </style>

    </head>

    <body>

        <div class="box">

            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

        </div>

    </body>

    <script type="text/javascript">

        /*

         *   clientTop 内容区域到边框顶部的距离 ，说白了，就是边框的高度

         *      clientLeft 内容区域到边框左部的距离，说白了就是边框的乱度

         *      clientWidth 内容区域+左右padding   可视宽度

         *      clientHeight 内容区域+ 上下padding   可视高度

         * */

        var oBox = document.getElementsByClassName('box')[0];

        console.log(oBox.clientTop);

        console.log(oBox.clientLeft);

        console.log(oBox.clientWidth);

        console.log(oBox.clientHeight)；   

    </script>

</html>

client

2.屏幕的可视区域

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        // 屏幕的可视区域

        window.onload = function(){

            // document.documentElement 获取的是html标签

            console.log(document.documentElement.clientWidth);

            console.log(document.documentElement.clientHeight);

            // 窗口大小发生变化时，会调用此方法

            window.onresize = function(){

                console.log(document.documentElement.clientWidth);

                console.log(document.documentElement.clientHeight);

            }

        }

    </script>

</html>

3.offset系列

代码如下，注释都挺清楚的

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                padding: 0;

                margin: 0;

            }

        </style>

    </head>

    <body style="height: 2000px">

        <div>

            <div class="wrap" style=" width: 300px;height: 300px;background-color: green">

                <div id="box" style="width: 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">

                </div>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        window.onload = function(){

            var box = document.getElementById('box')

            /*

             offsetWidth占位宽  内容+padding+border

             offsetHeight占位高

             * offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位，那么是以父辈为基准的top值

             * offsetLeft： 如果盒子没有设置定位 到body的左部的距离，如果盒子设置定位，那么是以父辈为基准的left值

             * */

            console.log(box.offsetTop)

            console.log(box.offsetLeft)

            console.log(box.offsetWidth)

            console.log(box.offsetHeight)

        }

    </script>

</html>

4.scroll系列

代码如下：

<!DOCTYPE html>

<html>

<head>

　　<meta charset="UTF-8">

　　<title></title>

　　<style type="text/css">

　　　　*{padding: 0;margin: 0;}

　　</style>

</head>

<body style="width: 2000px;height: 2000px;">

　　<div style="height: 200px;background-color: red;"></div>

　　<div style="height: 200px;background-color: green;"></div>

　　<div style="height: 200px;background-color: yellow;"></div>

　　<div style="height: 200px;background-color: blue;"></div>

　　<div style="height: 200px;background-color: gray;"></div>

　　<div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">

　　　　<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

　　　　　　哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

　　　　　　哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

　　　　　　哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

　　　　</p>

　　</div>

</body>

<script type="text/javascript">

　　window.onload = function(){

　　//实施监听滚动事件

　　window.onscroll = function(){

//                console.log(1111)

//                console.log('上'+document.documentElement.scrollTop)

//                console.log('左'+document.documentElement.scrollLeft)

//                console.log('宽'+document.documentElement.scrollWidth)

//                console.log('高'+document.documentElement.scrollHeight)

　　}

　　var s = document.getElementById('scroll');

　　s.onscroll = function(){

//            scrollHeight : 内容的高度+padding  不包含边框

　　console.log('上'+s.scrollTop)

　　console.log('左'+s.scrollLeft)

　　console.log('宽'+s.scrollWidth)

　　console.log('高'+s.scrollHeight)

　　　　}

　　}

　　</script>

</html>

JavaScript基础（四）的更多相关文章

  1. JavaScript基础四

    1.13 Js中的面向对象 1.13.1 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或 ...

  2. Javascript基础四（数组，字符，对象，日期）

    第一节:数组 1.数组的概念及定义     可以存放一组数据:          当需要操作多个数据时: 2.数组的创建方式 var arr1 = [1,2,3]; //字面量方式 var arr2 ...

  3. JavaScript 基础(四) - HTML DOM Event

    HTML DOM Event(事件) HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下 ...

  4. JavaScript 基础(四) 循环

    JavaScript的循环有两种,一种是for 循环,通过初始条件,结束条件和递增条件来循环执行语句块: var x = 0; var i; for(i=1; i <=10000; i++){ ...

  5. JavaScript 基础四

    遍历对象的属性 for...in 语句用于对数组或者对象的属性进行循环操作. for (变量 in 对象名字) { 在此执行代码 } 这个变量是自定义 符合命名规范 但是一般我们 都写为 k 或则 k ...

  6. JavaScript 基础 学习 （四）

    JavaScript 基础 学习 (四) 解绑事件 dom级 事件解绑 ​ 元素.on事件类型 = null ​ 因为赋值的关系,所以给事件赋值为 null 的时候 ​ 事件触发的时候,就没有事件处理 ...

  7. web前端学习（四）JavaScript学习笔记部分（1）-- JavaScript基础教程

    1.JavaScript基础教程 1.1.Javascript基础-介绍.实现.输出 1.1.1.JavaScript是互联网上最流行的脚本语言,这门语言可用于web和HTML,更可广泛用于服务端.p ...

  8. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  9. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  10. 一步步学习javascript基础篇（3）：Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

随机推荐

  1. 接口Interface的四种含义

    摘自<需求分析与系统设计(第3版)>第七章Q5 1. GUI——显示信息的计算机屏幕(注:其他终端) 2. API——是一套软件程序和开发工具,为应用程序提供函数调用,使程序可以访问一些级 ...

  2. sublime text3 license

    —– BEGIN LICENSE —– Michael Barnes Single User License EA7E-821385 8A353C41 872A0D5C DF9B2950 AFF6F6 ...

  3. hdu 5120 Intersection 两个圆的面积交

    Intersection Time Limit: 4000/4000 MS (Java/Others)    Memory Limit: 512000/512000 K (Java/Others) P ...

  4. Codeforces Round #271 (Div. 2) E. Pillars 线段树优化dp

    E. Pillars time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  5. OMShell常用命令及遇到的问题

    仿真并画图: loadModel(Modelica); loadFile ("C:/Users/wen/Desktop/TCS.mo"); simulate(TCS.TCS,sta ...

  6. sort-桶排序

    void list_insert(list<int> &t,int num) { auto iter=t.begin(); for(;iter!=t.end();++iter) { ...

  7. P10.3 usestock0.cpp

    stock.h #ifndef STOCK_H #define STOCK_H #include <string> class Stock //类声明 { private: std::st ...

  8. Python 读写操作Excel —— 安装第三方库（xlrd、xlwt、xlutils、openpyxl）

    数据处理是 Python 的一大应用场景,而 Excel 则是最流行的数据处理软件.因此用 Python 进行数据相关的工作时,难免要和 Excel 打交道. 如果仅仅是要以表单形式保存数据,可以借助 ...

  9. Restful Api 的好与坏

    restful 的特色是接口少 get,put,post,delete 好处是容易记, 统一. 但是业务上往往不会这么简单. 不同的 user/roles 调用同一个 get 接口, 出来的结果不一定 ...

  10. HAL库详解

    转自:https://blog.csdn.net/zcshoucsdn/article/details/55213616