JavaScript距离总结
2020-06-25 本文已影响0人
六寸光阴丶
<!DOCTYPE html>
<html>
<head>
<title>距离总结</title>
<style type='text/css'>
#box {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 10px solid black;
background-color: #ccc;
}
</style>
</head>
<body>
<div id='box'>
一个盒子
</div>
<script type='text/javascript'>
const getStyleValue = (dom, attr) => {
const style = dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom)[attr]
return Number(style.replace(/\s+|px/gi, ''))
}
const getWidth = dom => {
return dom.clientWidth - getStyleValue(dom, 'paddingLeft') - getStyleValue(dom, 'paddingRight')
}
const getHeight = dom => {
return dom.clientWidth - getStyleValue(dom, 'paddingTop') - getStyleValue(dom, 'paddingBottom')
}
const element = document.getElementById('box')
// 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
console.log('element.offsetWidth', element.offsetWidth)
// 返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
console.log('element.offsetHeight', element.offsetHeight)
// 返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
console.log('element.clientWidth', element.clientWidth)
// 返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
console.log('element.clientHeight', element.clientHeight)
// 返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
console.log('style.width', getWidth(element))
// 返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
console.log('style.height', getHeight(element))
// 返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
console.log('element.scrollWidth', element.scrollWidth)
//返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
console.log('element.scrollHeight', element.scrollHeight)
</script>
</body>
</html>
