写在前面：
Window和document对象的区别
window对象表示浏览器中打开的窗口
window对象是可以省略的 window.alert(1)
document对象是window对象的一部分, 可以写成window.document.body = document.body
浏览器的HTML文档成为Document对象
window.location和document.location
window.location == document.location //true
在iframe中 也是全等的
一、与window相关的高宽
window.innerWidth
window.innerHeight 去掉console控制台栏 不包括导航栏 菜单栏 地址栏(不包括资源管理器栏)
window.outerWidth
window.outerHeight 包括导航栏 菜单栏 地址栏(不包括资源管理器栏)
window.screen 包含用户屏幕的信息 (支持所有的浏览器 尽量screen是小写)
window.screen.height 整个屏幕的高
window.screen.width
window.screen.availHeight 去掉mac上无线网音量图标 去掉windows下面资源管理器一块
window.screen.availWidth
window.screenTop 浏览器距离顶部的距离
window.screenLeft 浏览器距离最左侧的距离
window相关的高宽兼容性表述
innerHeight IE9+
outerHeight IE9+
对于IE8,7,6,5 代替innerHeight 和 innerWidth
varw =document.documentElement.clientWidth ||document.body.clientWidth;varh =document.documentElement.clientHeight ||document.body.clientHeight;
二、document相关的宽高
1、与client相关的宽高
document.body.clientWidth
1)元素可视部分的宽, 即padding+content, 如果没有滚动条,就是元素设定的宽高
2)如果有滚动条,滚动条覆盖元素的宽高, 该属性就是元素本来宽高减去滚动条宽高
document.body.clientHeight
document.body.clientLeft
返回元素周围边框的厚度border, 如果不指定一个边框或者不定位该元素,其值就是0
clientTop = border-top的宽
clientLeft = border-left的宽
document.body.clientTop
2、与offset相关的宽高
document.body.offsetWidth
指的是元素的border+padding+content的宽度和高度
该属性和其内部的内容是否超出元素的大小无关, 只和本来设定的border以及width和height有关
假如没有无padding无滚动无border offsetWidth = clientWidth = style.width
假如有padding无滚动有border offsetWidth=style.width+style.aadding2+(borderWidth)2
假如有padding有滚动 offsetWidth = style.width + style.padding2 + borderWidth2 或者
offsetWidth = clientWidth + 滚动轴宽度 + border宽度*2
document.body.offsetHeight
document.body.offsetLeft
offsetParent 如果当前元素的父级元素没有进行css定位(position为absolute或者relative), offsetParent为body
如果单钱元素的父级元素中有css定位(position为absolute或者relative),offsetParent取最近的父级元素
兼容性问题
在IE6 7中 offsetLeft = offsetParent的padding-left+(当前元素的margin-left)
在IE8/9/10 chrome中, offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParent的padding-left宽度) + (当前元素的margin-left)
在firefox中 offsetLeft=(offsetParent的margin-left)+(当前元素的margin-left)+(offsetParent的padding-left宽度)
document.body.offsetTop
3、与scroll相关的宽高
document.body.scrollWidth document.body.scrollHeight 针对body 的scrollWidth和scrollHeight
给定的宽高小于浏览器窗口的时候, scrollWidth和scrollHeight通常是浏览器窗口的宽高
给定的宽高大于浏览器窗口且内容小于给定的宽高的时候, scrollWidth=给定的宽度+其所有的padding和magin以及border
给定的宽高大于浏览器窗口且内容大于给定的宽高的时候, scrollWidth=内容宽度+其所有的padding,margin,border
oDiv.scrollWidth oDiv.scrollHeight 针对某个div的情况
在无滚动轴的情况下, scrollWidth= clientWidth = style.width + style.padding*2
有滚动轴的情况下, scrollWidth = 实际内容的宽度 + padding2, scrollHeight = 实际内容的高度+padding2
document.body.scrollLeft document.body.scrollTop
该属性是可读写的, 值得是当元素其中的内容超出其宽高的时候, 元素被卷起的高度和宽度
document, documentElement, body
document.documentElement = html
document.documentElement.childeNodes[1] = body
document.body = body
document宽高兼容问题
client 各个浏览器的解析都一样
获取可视区域的宽高的时候, document.documentElement.clientWidth || document.body.clientWidth
offset
offsetLeft offsetTop有兼容性问题
offsetHeight offsetWidth 各个浏览器解析基本一致
scroll
在ff下 document.body.scrollHeight 将body当做一个div来处理,这里会有点不同 如果是在div下面是一样的
三、event对象中五种坐标
1、clientX和clientY
可视区域的, 相对于浏览器(可视区域左上角0,0)的坐标
鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
2、screenX和screenY
鼠标相对于设备屏幕左上角(0,0)的坐标
3、offsetX和offsetY
鼠标相对于事件源左上角(0,0)的坐标
4、pageX和pageY
鼠标相对于整个网页左上角(0,0)的坐标 (比如滚上去的区域也算在里面)
这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
vardivscroll =document.getElementById('testDiv')functiondivScroll(){// 获取div整个部分的高度varwholeHeight = divscroll.scrollHeight;// 获取div卷起的高度varscrollTop = divscroll.scrollTop;//获取div的高度 oDiv.style.height 获取的是内联样式的高度 取不到padding//var divHeight = divscroll.clientHeight;vardivHeight = divscroll.offsetHeight;if(scrollTop + divHeight >= wholeHeight) { alert("div滚动到了底部") }if(scrollTop ==0) { alert("div滚动到了头部") } } divscroll.onscroll =function(){ divScroll(); }
计算滚动轴的宽度
mac 下 滚动轴是不占用宽度的 会消失
但是windows系统下滚动轴是占用一定宽度的\
offsetWidth是包含滚动轴的 clientWidth如果文档有滚动轴是要减去滚动轴的
scrollWidth = el.offsetWidth - el.clientWidth;
// 通过offsetWidth - clientWidth计算functiongetScrollBar(){varel =document.createElement("p");varstyles = {width:'100px',height:'100px',overflowY:'scroll'};vari, scrollBarWidthfor(iinstyles) { el.style[i] = styles[i] }document.body.appendChild(el);varscrollBarWidth = el.offsetWidth - el.clientWidth; el.remove();returnscrollBarWidth; }console.log(getScrollBar())
添加滚动轴 clientWidth会变
functiongetScrollBar(){varel =document.createElement("p");varstyles = {width:'100px',height:'100px', };vari, scrollBarWidthfor(iinstyles) { el.style[i] = styles[i] }document.body.appendChild(el);varclientWidth1 = el.clientWidth;// 没有滚动轴下的宽度el.style.overflowY ="scroll"varclientWidth2 = el.clientWidth;//添加了滚动轴之后的宽度varscrollBarWidth = clientWidth1 - clientWidth2; el.remove();returnscrollBarWidth;}console.log(getScrollBar())
jQuery宽高理解
.width() .height()
不包括padding border margin
可读写的 (对于document和window 只能读不能写)
对于普通元素是可以读写的 width(value) width(function() {})
width([value])和css("width"[,value])的区别
width返回的结果是没有单位的
css("width")返回的结果是有单位的
.innerWidth() .innerHeight()
在element的基础上包括了padding 但是不包括border margin
对于document和window是只读的不写的
对于普通元素是可以读写的 innerWidth(value) innerWidth(function() {})
.outerWidth() .outerHeight()
outerHeight(true) 是包含border和margin的
outerHeight(false) 是只包含border不包含margin
对于window和document只读不写 和width()是相等的 不推荐使用
对于普通元素是可以读写的 outerWidth(value) outerWidth(function() {})
scrollLeft和scrollTop()
和js的是一样的
scrollLeft(): 相对于水品滚动条左边的距离, 如果滚动条非常左或者不能滚动, 那么scrollLeft为0 即卷进去的部分为0
scrollTop() 相对于纵向滚动条上边的距离, 如果滚动条非常上, 或者元素不能滚动, 那么这个值为0, 即卷上去的部分为0
html,body{margin:10px;border:5pxsolid red;padding:20px; }.parentDiv{width:800px;height:500px;margin:5pxauto;background:#FF6600;border:5pxdashed green;padding:30px;position: relative; }.childrenDiv{width:300px;height:300px;margin:50pxauto;background: yellow;border:5pxsolid black;padding:5px;box-sizing: border-box; }// window是可视区域的高度 随着窗口变化而变化 document是文档的高度是不变化的console.log($(window).height())console.log($(document).height())console.log($(window).innerHeight())console.log($(document).innerHeight())console.log($(window).outerHeight())console.log($(document).outerHeight())console.log("-----------------")// 普通元素的高度console.log($(".childrenDiv").height())//280 = 300 - border*2 - padding * 2console.log($(".childrenDiv").innerHeight())// 290 = 300 - padding * 2console.log($(".childrenDiv").outerHeight(true))// 300 包括padding+border 但是设置了属性box-sizing:border-box;console.log($(".childrenDiv").outerHeight(true))// 400 = 300 + margin * 2 包括padding+border+margin// scrollTop scrollLeft$(window).scroll(function(){console.log($(this).scrollTop())//输出滚动轴卷曲的高度}) $(".parentDiv").scroll(function(){console.log($(this).scrollTop())//输出滚动轴卷曲的高度})//offset position
offset() .position()
offset(): 相对于document的当前坐标值(相对于body左上角的left和top值)
position(): 相对于offsetParent()(最近的一个父级有position属性)的一个偏移坐标值
html,body{margin:10px;border:5pxsolid red;padding:20px; }.parentDiv{width:800px;height:500px;margin:5pxauto;background:#FF6600;border:5pxdashed green;padding:30px;position: relative; }.childrenDiv{width:300px;height:300px;margin:50pxauto;background: yellow;border:5pxsolid black;padding:5px;position: relative;left:10px;top:30px; }//offset positionconsole.log($(".childrenDiv").offset().top)// 155console.log($(".childrenDiv").offset().left)// 582// position有兼容性问题// 如果父元素没有设置position 距离浏览器顶端 看margin的左上角console.log($(".childrenDiv").position().top)// 30 + 30console.log($(".childrenDiv").position().left)// 30 + 10
jQuery宽高理解应用
可视区域的加载
#showDiv{width:500px;height:350px;background: dodgerblue;margin:1000pxauto0; } @-webkit-keyframesfadeInLeft { 0% {opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0); } 100% {opacity:1;-webkit-transform: none;transform: none; } } @keyframesfadeInLeft {from{opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0); }to{opacity:1;-webkit-transform: none;transform: none; } }.fadeInLeft{animation: fadeInLeft2sease;-webkit-animation: fadeInLeft2sease; }$(window).scroll(function(){// 获取可视区域varks_area = $(window).height();//卷起的高度varscrollHeight = $(window).scrollTop();//div距离顶部的距离vardivtop = $("#showDiv").offset().top;console.log(ks_area)console.log(scrollHeight)console.log(divtop)if(ks_area + scrollHeight >= divtop) { $("#showDiv").addClass("fadeInLeft"); } });
滚动到底部加载 顶部
// 可视区域的高度varks_area = $(window).height();// 整个文档的高度varwholeHeight = $(document).height(); $(window).scroll(function(){// 卷起的高度varscrollTop = $(window).scrollTop();if(scrollTop ==0) { alert("滚动到了顶部") }if(scrollTop + ks_area >= wholeHeight) { alert("滚动到了底部") } })
作者：FConfidence
链接：https://www.jianshu.com/p/e874ae203a60
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
#showDiv{width:500px;height:350px;background: dodgerblue;margin:1000pxauto0; } @-webkit-keyframesfadeInLeft { 0% {opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0); } 100% {opacity:1;-webkit-transform: none;transform: none; } } @keyframesfadeInLeft {from{opacity:0;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0); }to{opacity:1;-webkit-transform: none;transform: none; } }.fadeInLeft{animation: fadeInLeft2sease;-webkit-animation: fadeInLeft2sease; }
.scrolldiv{width:500px;height:400px;margin:1000pxauto100pxauto;background:#FF0000; }
网友评论