尺寸和位置 - 会coding的HAM

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>尺寸和位置</title>
<style>
html,body{
height: 100%;
}
section{
width: 300px;
height: 300px;
background-color: red;
margin: 100px auto;
border: 20px solid blue;
padding: 50px;
position: relative;
}
button{
position: absolute;
top: 100px;
left: 100px;
border: 10px solid yellow;
margin: 0;
}
</style>
</head>
<body>
<section>
<button>按钮</button>
</section>
<script>
var sec = document.querySelector('section')
// alert(sec.clientHeight)
// 获取元素的内高度 padding + content
// alert(sec.clientTop)
// border的尺寸
// alert(sec.getBoundingClientRect().bottom)
// 这个方法返回一个矩形对象，包含四个属性：left、top、right、bottom
// 分别表示元素各边与页面上边和左边的距离
var btn =document.querySelector('button')
// alert(btn.offsetHeight)
// 获取元素外高度 border + padding + content
// alert(btn.offsetTop)
// 获取元素上偏移量相对与定位参考元素的距离
btn.offsetTop = '60px' //设置它的值是无效的
// 改变位置使用以下方式
btn.style.top = '200px'
btn.style.left = 'auto'
btn.style.right = '100px'
// alert(btn.offsetTop)
// sec.onclick = function(){
// btn.scrollIntoView()
// // 可以让标签元素滚动到窗口工作区上边缘
// }
btn.onclick =function(){
var popup =document.createElement('div')
popup.style.width = '100px'
popup.style.height = '100px'
popup.style.border = '2px solid yellow'
popup.style.position = 'absolute'
popup.style.top = btn.offsetTop + btn.offsetHeight + 5 + 'px'
popup.style.left = btn.offsetLeft + 'px'
sec.appendChild(popup)
var close =document.createElement('div')
close.style.width = '20px'
close.style.height = '20px'
close.style.backgroundColor = 'yellow'
close.style.position = 'absolute'
close.style.top = btn.offsetTop + btn.offsetHeight + 5 -10 + 'px'
close.style.left = btn.offsetLeft + popup.offsetWidth - 10 + 'px'
close.style.borderRadius = '50%'
close.innerText = 'X'
close.style.textAlign = 'center'
close.style.cursor = 'pointer'
sec.appendChild(close)
close.onclick =function(){
sec.removeChild(popup)
sec.removeChild(close)
}
}
// alert(document.documentElement.scrollTop)
// alert(document.documentElement.scrollLeft)
// 页面滚动的距离如果没有滚动则为0
// alert(document.documentElement.scrollHeight)
// alert(document.documentElement.scrollWidth)
// 页面自身的高度和宽度
// 没有滚动条的时候页面的宽度和高度等于窗口的宽度和高度
// 有滚动条的时候页面的宽度和高度大于窗口的宽度和高度
// document.documentElement.scrollBy(100,100)
// 相对于当前位置滚动的距离
// document.documentElement.scrollTo(100,100)
// 滚动的距离（相当于滚动的起点）滚动到哪个位置
// window.scrollByPages(1) //按页滚动
// window.scrollByLines(1) //按行滚动
// alert(document.documentElement.clientHeight)
// alert(document.documentElement.clientWidth)
// 窗口工作区的宽度和高度
// alert(window.innerWidth)
// 窗口内宽度
// alert(window.outerWidth)
// 窗口的外宽度
// 外宽度 - 内宽度 = 滚动条 + 窗口边框
// alert(window.outerHeight)
// 窗口外高度
// alert(window.innerHeight)
// 窗口内高度
// 外高度 - 内高度 = 窗口标题栏 + 窗口工具栏
// alert(window.screen.width)
// 屏幕的总宽度
// alert(window.screen.height)
// 屏幕的总高度
// alert(window.screenX)
// alert(window.screenY)
// 获取窗口左上角的坐标
alert(window.screen.availHeight)
// 屏幕可用高度（扣除任务栏）
alert(window.screen.availWidth)
// 屏幕可用宽度（扣除任务栏）
</script>
</body>
</html>

推荐资料：JavaScript中的各种宽高属性

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论