一键搞定内网穿透 联行号查询|开户行查询 在线工具箱 藏经阁
当前位置:首页 / 杂记 / 正文
dom/window/document宽高
 ♦ dom的left属性
 dom元素的外边框左边(margin-left边)到最近(依次向上找)一个具有定位设置(非static)父元素的左边缘(边里面不是边外面)的距离
 忽略父元素的padding,因为margin/border都是在父元素面,和它两无关,所以margin/border不影响距离计算
 如果没有找到父元素就是距离文档document左边的距离
 js赋值 dom.style.left="100px"
 js取值 dom.style.left //100px
 其它3个属性类似 bottom、right、top

 ♦ $(dom).offset
 不同jquery版本算出的offset结果是不一样的
 赋值 $(dom).offset({left:100})
 取值 $(dom).offset().left/top
 
 ♦ $(dom).position()
 只能取值不能赋值 $(dom).position().top/left
 .position()方法可以取得元素相对于父元素的偏移位置。.offset()是获得该元素相对于documet的当前坐标 

 ♦ dom.offsetLeft 
 = dom的left属性 + marginLeft
 offsetTop与其类似,不存在offsetRIght和offsetBottom

 ♦ $(dom).width()
 dom元素纯宽度(不含padding、border、margin)

 ♦ dom.clientWidth
 = width + padding
 = $(dom).innerWidth()
 它就是指 width + padding 的值,与屏幕宽、可视区都无关,可能在可视区内也可能超出可视区域
 不能用它来算屏幕宽或文档宽
 dom.clientHeight和它类似

 ♦ dom.offsetWidth
 = width + padding + border
 = $(dom).outerWidth()
 它就是指 width + padding + border 的值,与屏幕宽、可视区都无关,可能在可视区内也可能超出可视区域
 不能用它来算屏幕宽或文档宽
 dom.offsetHeight和它类似
 
 ♦ $(dom).outerWidth(true)
 = width + padding + border + margin
 它就是指 width + padding + border + margin 的值,与屏幕宽、可视区都无关,可能在可视区内也可能超出可视区域
 不能用它来算屏幕宽或文档宽
 $(dom).outerHeight(true)和它类似

 ♦ dom.scrollWidth
 dom中内容的宽度,包括有滚动条时的未见区域
 dom.scrollHeight和它类似

 ♦ dom.scrollTop
 = $(dom).scrollTop()
 元素滚动条内的顶部隐藏部分的高度
 document.querySelector("div").scrollTop 只有div中的内容超出div高度并且设置了高度超出后出现滚动条并且进行了滚动时才>0,否则=0
 该属性只有DOM元素才有,window/document没有
 js获得整个文档scrollTop:有DOCTYPE时document.documentElement.scrollTop,否则document.body.scrollTop
 jquery获得整个文档scrollTop:$(window).scrollTop() = $(document).scrollTop(),推荐前者
 dom.scrollLeft和它类似

 ♦ window.screen.width
 很少使用,相对来说如果用可能也是移动端适合
 设备屏幕分辨率的宽(在t420本浏览器中它是1366,无论怎样缩放浏览器都是1366)
 在浏览器响应式模式下,就是模拟怒屏幕的宽(如iphoneX 375 * 812,则宽就是375)
 在移动端 = $(window).width()
 在pc浏览器中 > $(window).width()
 window.screen.height和它类似

 ♦ $(window).height()
 可视窗口高度

 ♦ $(document).height()
 文档高度