BOM、DOM、CSS尺寸获取

    xiaoxiao2021-03-26  34

    DOM

    clientWidth:获取元素的宽度(包括内边距) clientHeight:获取元素的高度(包括内边距)

    offsetWidth:获取元素的宽度(包括边框、内边距、滚动条) offsetHeight:获取元素的高度(包括边框、内边距、滚动条)

    scrollWidth:获取元素宽度(包括内边距,减去滚动条,包括超出内容的宽度) scrollHeight:获取元素高度(包括内边距,减去滚动条,包括超出内容的高度)

    clientTop:获取元素上边框尺寸 clientLeft:获取元素左边框尺寸

    offsetTop: 获取元素离父元素顶部的距离 offsetLeft: 获取元素离父元素左边的距离

    scrollTop:获取滚动条离文档顶部的距离 scrollLeft:获取滚动条离文档左侧的距离

    getBoundingClientRect():获取元素上下左右离窗口(定位状态下及IE是离文档)顶部和左侧尺寸的集合 getBoundingClientRect().top:获取元素顶部到文档顶部距离 getBoundingClientRect().bottom:获取元素底部到文档顶部距离 getBoundingClientRect().left:获取元素左边到文档左边距离 getBoundingClientRect().right:获取元素右边到文档左边距离

    BOM

    窗口的内高度、内宽度(文档显示区域+滚动条) window.innerWidth window.innerHeight

    窗口的外高度、外宽度 window.outerWidth window.outerHeiht

    获取窗口左上角与屏幕左上角的距离 window.screenX window.screenY

    获取屏幕宽高 window.screen.width window.screen.height

    屏幕可用宽高(去除任务栏) window.screen.availWidth window.screen.availHeight

    CSS

    window.getComputedStyle(element, null).width :获取宽度 window.getComputedStyle(element, null).height :获取高度 window.getComputedStyle(element, null).marginTop :获取上外边距 window.getComputedStyle(element, null).paddingTop :获取上内边距 window.getComputedStyle(element, null).borderTopWidth :获取上边框高度

    转载请注明原文地址: https://ju.6miu.com/read-350307.html

    最新回复(0)