Size 1.Dom elements
offsetWidth / offsetHeight property returns the element size (width + border + padding)
the clientWidth / visible the clientHeight property returns the element size (width + padding)
the getComputedStyle (Box) .width return element's content area size (with units)
scrollWidth / scrollHeight property returns the element size (volume to contain the size of the scroll bar)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<style>
*{padding: 0;margin: 0;}
#box{
width: 400px;
height: 200px;
padding: 10px;
border:2px solid red;
}
#big{
width: 600px;
height: 300px;
background-color: pink;
}
</style>
<body>
<div id="box">
<div id="big"></div>
</div>
</body>
</html>
<script>
var box = document.querySelector('#box')
// 元素总大小
console.log(box.offsetWidth) // 424
console.log(box.offsetHeight) // 224
// 元素可见大小
console.log(box.clientWidth) // 420
console.log(box.clientHeight) // 220
// 元素内容区大小
var width = getComputedStyle(box).width
var height = getComputedStyle(box).height
console.log(width,height) // 400px 200px
// 元素大小（包含被滚动条卷去的大小）
console.log(box.scrollWidth) //610
console.log(box.scrollHeight) //310
</script>Location information 2.Dom elements
offsetLeft / offsetTop attributes: Get the current element from the parent of the positioning element's border to note, is the parent of positioning elements! ! !
scrollLeft / scrollTop properties: get and set the current element is rolled to width and height of the scroll bar (provided that the child elements of the parent element and beyond the scroll bar)
Can also scrollLeft / scrollTop property set size, so that the elements of the scroll bar to scroll to the appropriate location
<script>
var box = document.querySelector('#box')
// 让box元素回到顶部
box.scrollTop = 0
// 让box元素回到最左边
box.scrollLeft = 0
</script>3. Get Screen Size
window.screen.width / height: the value of this property is static, not with the contraction of the browser window and change.
document.documentElement.clientWidth: This is the visual width html tags, he depends on the current size of the browser window.
<script>
var screen_width = window.screen.width
var screen_height = window.screen.height
document.write('当前屏幕宽高为'+screen_width+'*' + screen_height)
var html_width = document.documentElement.clientWidth
var html_height = document.documentElement.clientHeight
document.write('<br />'+'当前html标签宽高为'+html_width+'*' + html_height)
</script>pc-performance (14-inch notebook - full-screen browser)
当前屏幕宽高为1366*768
当前html标签宽高为1366*625pc-performance (14-inch notebook - of the browser window)
当前屏幕宽高为1366*768
当前html标签宽高为767*604When the mobile terminal is not provided viewport (iphone6s plus)
当前屏幕宽高为414*736
当前html标签宽高为980*1472Moving end disposed perfect viewport
<meta name="viewport" content="initial-scale=1.0">
当前屏幕宽高为414*736
当前html标签宽高为414*622