码迷,mamicode.com
首页 > Web开发 > 详细

js/jQuery中的宽高

时间:2017-06-02 21:57:26      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:htm   padding   隐藏   span   屏幕   scrollto   name   height   font   

一、和window有关的宽高

window.innerWidth:浏览器窗口宽度

window.innerHeight:浏览器窗口高度(不包括导航,工具栏等的高度)

window.outerWidth:浏览器窗口宽度(很多时候===window.innerWidth)

window.outerHeight:浏览器窗口高度(包括导航,工具栏等的高度)

window.screen.width:用户设备屏幕的宽度

window.screen.height:用户设备屏幕的高度

window.screen.availWidth:

window.screen.availHeight:

window.screenTop:浏览器距离屏幕顶部高度

window.screenLeft:浏览器距离屏幕左侧宽度

 

二、client有关宽高

clientWidth、clientHeight: padding+content 如果有滚动条 再减去滚动条宽度/高度

clientTop:等于border-top的width

clientLeft:等于border-left的width

 

三、offset相关宽高

offsetHeight,

offsetWidth 等于border+padding+content;与内容是否超出原设定宽高无关,与是否有滚动轴无关

offsetLeft:相对于定位父级(offsetParent)元素左侧距离;offsetParent的margin-left+offsetParent的border-left宽度+当前元素的margin-left

offsetTop:相对于定位父级(offsetParent)元素左侧距离;

 

四、与scroll相关的宽高

scrollLeft,被滚动条隐藏部分的宽度

scrollTop: 被滚动条隐藏部分的高度

scrollWidth:内容的全部实际宽度,当内容不超过可视区域的时候=clientWidth

scrollHeight:内容的全部实际高度,当内容不超过可视区域的时候clientHeight

 

五documentElement与body的关系

document(nodetype=9,nodeName=#docuemnt)——>documentElement(nodeType=1,nodeName=html)——>body(nodeType=1,nodeName=body) 

documentElement是body的父元素

 

js/jQuery中的宽高

标签:htm   padding   隐藏   span   屏幕   scrollto   name   height   font   

原文地址:http://www.cnblogs.com/bobodeboke/p/6935086.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!