一、原生JS快捷的尺寸(属性)(注意这些属性的结果 不带PX单位)

  1. clientWidth/clientHeight  　　　　　　=====> 获得元素content+padding的宽/高；
  2. offsetWidth/offsetHeight　　　　　　=====>获得元素content+padding+border的宽/高；
  3. clientLeft/clientTop                              =====>左/上边框的距离；
  4. offsetLeft/offsetTop                             =====>获得距离父元素定位左/上的距离       IE浏览器计算边框    // 高级浏览器不计算边框；
  5. offsetParent                                         =====>获得定位的父元素的信息 （父元素不一定是parentNode,若没有定位，则往祖 1 <!DOCTYPE html>　　

1-2的案例

<!DOCTYPE html>

<html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

     *{

         padding: 0;

         margin: 0;

     }

     div{

         width: 200px;

         height: 200px;

         border: 10px solid black;

         background-color:orange;

         padding:16px;

         margin:20px;

     }

     </style>

 </head>

 <body>

    <div id="box">i love you</div>

     <script>

     //原生JS

     //clientWidth/Height===content+padding

     //offsetWidth/Height===content+padding+border

     var div=document.getElementsByTagName("div")[0];

     //获得尺寸

     console.log(div.clientWidth,div.clientHeight);

     console.log(div.offsetWidth,div.offsetHeight);

     </script>

 </body>

 </html>

3的案例:　　　　　　　　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    *{

        padding: 0;

        margin: 0;

    }

    div{

        width: 200px;

        height: 200px;

        border: 10px solid black;

        position: relative;

        border-left:30px solid blue;

        border-top:40px solid green;

        background-color:orange;

        padding:16px;

        margin:20px;

    }

    </style>

</head>

<body>

    <div id="box">i love you</div>

    <script>

    //原生JS

    //clientLeft/Top    获得左/上边框的宽度

    var div=document.getElementsByTagName("div")[0];

    //获得尺寸

    console.log(div.clientLeft,div.clientTop);

    </script>

</body>

</html>

4-5的案例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

     *{

         padding: 0;

         margin: 0;

     }

     #carousel{

         position:relative;

         width:200px;

         height: 200px;

         border: 1px solid red;

         margin: 0 auto;

     }

     #box{

         position:absolute;

         left:20px;

         top:30px;

         width: 50px;

         height: 50px;

         background-color:orange;

     }

     </style>

 </head>

 <body>

     <div id="carousel">

         <div id="unit">

             <div id="box"></div>

         </div>

     </div>

     <script>

     //获得元素对象

     var box=document.getElementById("box");

     // offsetParent() 获得定位的祖先元素(若父元素没有就一直玩上找 直到定位元素body)

     // offsetLeft/Top 获得距离父元素左/上的位置

     console.log(box.offsetParent)

     console.log(box.parentNode);

     console.log(box.offsetLeft);

     console.log(box.offsetTop);

     </script>

 </body>

 </html>

二 、jquery的快捷尺寸(方法)

  1. offset()                                   　　　========获得到页面的距离；
  2. position()                               　　　========获得元素的定位信息；
  3. width()/height()　　　　　　　　　========获得元素content的宽/高；
  4. innerWidth()/innerHeight() 　　　=============获得元素content+padding的宽/高；
  5. outerWidth()/outerHeight()　　　=====默认(false)获得元素content+padding+border的宽/高；设置(true)获得元素content+padding+border+margin的宽/高；
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

     *{

         padding: 0;

         margin: 0;

     }

     div{

         width: 200px;

         height: 200px;

         border: 10px solid black;

         position: relative;

         padding:16px;

         margin:20px;

     }

     </style>

 </head>

 <body>

     <div id="box">i love you</div>

     <script src="../js/jquery-1.12.3.min.js"></script>

     <script>

     //Jquery的快捷尺寸

     //width/height()  ===content

     //innerWidth/Height()===content+padding

     //outerWidth/Height(false)===content+padding+border//默认false

     //outerWidth/Height(true)===content+padding+border+margin

     // 获得元素对象

     var $div=$("#box");

     console.log("innerWidth",$div.innerWidth(),"innerHeight",$div.innerHeight());

     console.log("outerWidth",$div.outerWidth(),"outHeight",$div.outerHeight());//默认false

     console.log("outerWidth",$div.outerWidth(true),"outHeight",$div.outerHeight(true));

     </script>

 </body>

 </html>

三、滚动条事件

1  onscroll（滚动条滚动的事件，鼠标的滚轮、上下键、空格、PgUp、PgDn）；

2   获得页面滚动条的卷动值

垂直方向：document.documentElement.scrollTop;

水平方向：document.documentElement.scrollLeft;

3   获得视口的宽度和高度：

宽度：document.documentElement.clientWidth；

高度：document.documentElement.clientHeight；

四、鼠标滚轴

1   滚轴事件（注意兼容）

谷歌/IE： mousewheel

火狐：DOMMouseScroll 只支持DOM2事件绑定

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <script>

         //DOM 2级事件兼容绑定

         function addHandler(e,type,handler){

             if(e.addEventListener){

                 //高级浏览器// 火狐与谷歌IE的滚轴事件不同 这里兼容下

                 ////滚轴事件 火狐 DOMMouseScroll   detail的值为正 则是鼠标向上；为负则是向下。

                 // 非火狐 mousewheel  wheelDelta的值为正 则是鼠标向上；为负则是向下。

                 if(type==="DOMmouseScroll"){

                     e.addEventListener(type,handler,false);

                 }else{

                     e.addEventListener(type,handler,false);

                 }

             }else if(e.attachEvent){

                 //IE高级浏览器

                 e.attachEvent("on"+type,handler);

             }else{

                 //IE8及以下低端浏览器

                 e["on"+type]=handler

             }

         }

          //DOM 2级事件兼容移除

         function removeHandler(e,type,handler){

           if(e.removeEventListener){

               e.removeEventListener(type,handler,false);

           }else if(e.detachEvent){

               e.detachEvent(type,handler);

           }else{

               e["on"+type]=handler;

           }

         }

         addHandler(document,"mousewheel",function(){

             console.log(111);

         })

     </script>

 </body>

 </html>

2 滚轴的方向

谷歌和IE：e.wheelDelta        （值向上为正，向下为负）

火狐: e.detail　　　　　　　　（值向上为负,向下为正）

3 键盘三事件

keydown 键盘按下事件

keypress 键盘按下未抬起事件

keyup 键盘抬起事件

执行顺序：

keydown======>keypress=====>keyup

4 tabIndex  （属性） 定义：当给一些不能获得焦点的元素绑定键盘事件的时候，首先应该设置tabIndex属性

tabIndex属性可以让元素获得焦点

tabIndex的属性值控制获得焦点的顺序

tab:切换  从小到大

shift + tab: 反向切换 从大到小

最新文章

  1. 【linux编程】linux中HZ和Jiffies的关系
  2. Codeforces 727 F. Polycarp&#39;s problems
  3. OpenWrt——神奇的路由系统
  4. Android自定义遮罩层设计
  5. &lt;a&gt;多颜色标签点击之后保持原色的一次实践， Ext Panel下解决及通用方案思路
  6. 如何启用Service，如何停用Service
  7. Windows环境下 配置memcached (php)
  8. 12100 Printer Queue（优先队列）
  9. setcookie 设置无效
  10. 四大组件之一---------activity的知识
  11. iOS开发经验相关知识
  12. Python内置函数(53)——repr
  13. Map集合转成json数据
  14. iOS开发GCD(3)-数据安全
  15. Writing device drivers in Linux: A brief tutorial
  16. python 修改excel
  17. apk的php解析
  18. 教程Xcode 下编译发布与提交App到AppStore
  19. pgAdmin4 重置布局
  20. UML初览（转）

热门文章

  1. Model-Agnostic Meta-Learning for Fast Adaptation of Deep Networks(用于深度网络快速适应的元学习)
  2. java复制项目中的补丁，完整的包路径
  3. es入门--curl的使用
  4. splice()、slice()、split()函数的区分
  5. 模板引擎ejs的include方法
  6. Getting CFNetwork SSLHandshake failed (-9806) error
  7. 数据结构和算法（Java版）快速学习（栈与队列）
  8. 576D Flights for Regular Customers
  9. C# 导出Excel文件 所导出文件打开时提示“Excel文件格式与扩展名指定格式不一致”
  10. Java ——集合框架 list lambda set map 遍历方法 数据结构