js学习日记-各种宽高总结(配图)
2018-06-24 02:17:24来源:未知 阅读 ()
1.窗口和浏览器
window.innerWidth、window.innerHeight 浏览器内部可用宽高
window.outerWidth、window.outerHeight 浏览器整体宽高
window.screenTop(Firefox采用screenX) 浏览器左上角距离屏幕顶端的距离(IE、Opera、Chrome中如果紧贴屏幕顶部的话,则Top为浏览器工具栏的高度,而Firefox则为0)
window.screenLeft((Firefox采用screenY) 浏览器左上角距离屏幕左边的距离
window.screen.width、window.screen.height(屏幕宽高)
window.screen.availWidth/availHeight(屏幕可用工作区的宽高)
2. document下面宽高
clientWidth/clientHeight:
元素的可视部分宽度和高度,即padding+content
如果没有滚动条,即为元素设定的宽高;有滚动条时,要减去滚动条所占的宽高
<!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> .one{ width: 200px; height: 200px; background: red; border: 1px solid #000000; overflow: auto; } </style> </head> <body> <div class="one"> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> javascript高级应用<br> </div> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; console.log(oDiv.clientWidth+":"+oDiv.clientHeight); } </script> </body> </html>
上面例子中因为有纵向滚动条,所以clientWidth=200-垂直滚动条所占宽度
clientTop、clientLeft:
元素的border的宽度(分别是上方边框宽,左侧边框宽)
offsetWidth和offsetHeight
这一对属性指的是元素的border+padding+content的宽度和高度,该属性和其内部的内容是否超出元素大小无关,只和本来设定的border以及width和height有关
offsetWidth=clientWidth+clientLeft
offsetHeight=clientHeight+clientTop
offsetLeft和offsetTop
说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的(position:absolute或者position:relative)父级元素(不仅仅指的是直接父级元素,只要是它的父元素都可以),该父级元素就是当前元素的offsetParent,如果从该元素向上寻找,找不到这样一个父级元素,那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素,相对于其offsetParent左边距离和上边距离,即当前元素的border到包含它的offsetParent的border的距离。
scrollHeight和scrollWidth:
顾名思义,这两个属性指的是当元素内部的内容超出其宽度和高度的时候,元素内部内容的实际宽度和高度。
需要注意的是对body元素这两个属性的计算:
1.无滚动轴:
1.宽高小于浏览器窗口:浏览器窗口的宽高(不同的浏览器有不同的处理,取clientWidth和scrollWidth中较大的一个)
2.宽高大于浏览器窗口:内容的实际高度+padding+margin
2.有滚动轴:内容的实际高度+padding+margin
scrollTop和scrollLeft
属性可读写,指的是当元素其中的内容超出其宽高的时候,元素被卷起的高度和宽度
2.如何调用
BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。
当document.compatMode等于BackCompat时,使用document.body.xxx;
当document.compatMode等于CSS1Compat时,使用document.documentElement.xxx。
具体的应用可参考《用Javascript获取页面元素的位置》
3.Event的位置
clientX和clientY
鼠标点击位置相对于浏览器(可视区)的坐标(0,0),计算鼠标点击位置距离其左上角的位置,不管浏览器窗口大小如何变化,都不会影响点击位置的坐标
pageX和pageY
鼠标点击位置相对于页面的位置,通常浏览器窗口没有出现滚动条时,该属性和event.clientX及event.clientY是等价的,但是当浏览器出现滚动条的时候,pageX通常会大于clientX
screenX和screenY
鼠标点击位置相对于屏幕的坐标
offsetX和offsetY
鼠标点击位置相对于容器左上角为起点的坐标,唯独Firefox不支持该属性,Firefox中与此属性相对应的概念是,event.layerX和event.layerY
<!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> .one{ width: 200px; height: 200px; background: red; border: 1px solid #000000; overflow: auto; } /* body{ height: 5000px; } */ </style> </head> <body> <div class="one" id="one"> </div> <script> document.getElementById("one").onclick=function(e){ console.log(e.offsetX); } </script> </body> </html
点击div左上角时,x的值很小,点击右下角时x的值很大
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css渲染(一) 字体
下一篇:学习js与css 写个2048
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- 毕业生想学习web前端开发,有什么好的发展方向吗? 2020-06-09
- 转行前端很迷茫,该怎么学习? 2020-06-06
- 前端学习记录 2020-06-05
- 前端如何学习? 2020-06-04
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash