一、原生JS快捷的尺寸(属性)(注意这些属性的结果 不带PX单位)
- clientWidth/clientHeight =====> 获得元素content+padding的宽/高；
- offsetWidth/offsetHeight =====>获得元素content+padding+border的宽/高；
- clientLeft/clientTop =====>左/上边框的距离；
- offsetLeft/offsetTop =====>获得距离父元素定位左/上的距离 IE浏览器计算边框 // 高级浏览器不计算边框；
- 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{
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{
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的案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 padding: 0; 11 margin: 0; 12 } 13 #carousel{ 14 position:relative; 15 200px; 16 height: 200px; 17 border: 1px solid red; 18 margin: 0 auto; 19 } 20 #box{ 21 position:absolute; 22 left:20px; 23 top:30px; 24 50px; 25 height: 50px; 26 background-color:orange; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="carousel"> 32 <div id="unit"> 33 <div id="box"></div> 34 </div> 35 </div> 36 <script> 37 //获得元素对象 38 var box=document.getElementById("box"); 39 // offsetParent() 获得定位的祖先元素(若父元素没有就一直玩上找 直到定位元素body) 40 // offsetLeft/Top 获得距离父元素左/上的位置 41 console.log(box.offsetParent) 42 console.log(box.parentNode); 43 console.log(box.offsetLeft); 44 console.log(box.offsetTop); 45 </script> 46 </body> 47 </html>
二 、jquery的快捷尺寸(方法)
- offset() ========获得到页面的距离；
- position() ========获得元素的定位信息；
- width()/height() ========获得元素content的宽/高；
- innerWidth()/innerHeight() =============获得元素content+padding的宽/高；
- outerWidth()/outerHeight() =====默认(false)获得元素content+padding+border的宽/高；设置(true)获得元素content+padding+border+margin的宽/高；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 *{ 10 padding: 0; 11 margin: 0; 12 } 13 div{ 14 200px; 15 height: 200px; 16 border: 10px solid black; 17 position: relative; 18 padding:16px; 19 margin:20px; 20 } 21 </style> 22 </head> 23 <body> 24 <div id="box">i love you</div> 25 <script src="../js/jquery-1.12.3.min.js"></script> 26 <script> 27 //Jquery的快捷尺寸 28 //width/height() ===content 29 //innerWidth/Height()===content+padding 30 //outerWidth/Height(false)===content+padding+border//默认false 31 //outerWidth/Height(true)===content+padding+border+margin 32 33 // 获得元素对象 34 var $div=$("#box"); 35 console.log("innerWidth",$div.innerWidth(),"innerHeight",$div.innerHeight()); 36 console.log("outerWidth",$div.outerWidth(),"outHeight",$div.outerHeight());//默认false 37 console.log("outerWidth",$div.outerWidth(true),"outHeight",$div.outerHeight(true)); 38 </script> 39 </body> 40 </html>
三、滚动条事件
1 onscroll（滚动条滚动的事件，鼠标的滚轮、上下键、空格、PgUp、PgDn）；
2 获得页面滚动条的卷动值
垂直方向：document.documentElement.scrollTop;
水平方向：document.documentElement.scrollLeft;
3 获得视口的宽度和高度：
宽度：document.documentElement.clientWidth；
高度：document.documentElement.clientHeight；
四、鼠标滚轴
1 滚轴事件（注意兼容）
谷歌/IE： mousewheel
火狐：DOMMouseScroll 只支持DOM2事件绑定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <script> 11 //DOM 2级事件兼容绑定 12 function addHandler(e,type,handler){ 13 if(e.addEventListener){ 14 //高级浏览器// 火狐与谷歌IE的滚轴事件不同 这里兼容下 15 ////滚轴事件 火狐 DOMMouseScroll detail的值为正 则是鼠标向上；为负则是向下。 16 // 非火狐 mousewheel wheelDelta的值为正 则是鼠标向上；为负则是向下。 17 if(type==="DOMmouseScroll"){ 18 e.addEventListener(type,handler,false); 19 }else{ 20 e.addEventListener(type,handler,false); 21 } 22 }else if(e.attachEvent){ 23 //IE高级浏览器 24 e.attachEvent("on"+type,handler); 25 }else{ 26 //IE8及以下低端浏览器 27 e["on"+type]=handler 28 } 29 } 30 //DOM 2级事件兼容移除 31 function removeHandler(e,type,handler){ 32 if(e.removeEventListener){ 33 e.removeEventListener(type,handler,false); 34 }else if(e.detachEvent){ 35 e.detachEvent(type,handler); 36 }else{ 37 e["on"+type]=handler; 38 } 39 } 40 addHandler(document,"mousewheel",function(){ 41 console.log(111); 42 }) 43 </script> 44 </body> 45 </html>
2 滚轴的方向
谷歌和IE：e.wheelDelta （值向上为正，向下为负）
火狐: e.detail （值向上为负,向下为正）
3 键盘三事件
keydown 键盘按下事件
keypress 键盘按下未抬起事件
keyup 键盘抬起事件
执行顺序：
keydown======>keypress=====>keyup
4 tabIndex （属性） 定义：当给一些不能获得焦点的元素绑定键盘事件的时候，首先应该设置tabIndex属性
tabIndex属性可以让元素获得焦点
tabIndex的属性值控制获得焦点的顺序
tab:切换 从小到大
shift + tab: 反向切换 从大到小