DOM宽高位置和滚动条案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
border: 10px solid black;
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
overflow: scroll;
}
#aa{
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div>
<p id="aa"></p>
</div>
<script>
var div=document.querySelector("div");
//如果使用了overflow：scroll，则要减去滚动条的宽度或高度
console.log(div.clientHeight,div.clientWidth); //获取width+padding
console.log(div.offsetWidth,div.offsetHeight); //获取width+padding+border
//如果使用overflow：hidden div 左padding+里面最大的宽度
//而高度内外的padding都会添加进去
console.log(div.scrollWidth,div.scrollHeight); //获取width+padding
//当前文档的宽高(html)
console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
</script>
</body>
</html>
//案例1 随机生成div的位置但是不能超出文档实际的宽和高
document 是文档 一切的根源
document.documentElement 是html元素
document.body 是body元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
position: relative;
background-color:orange;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector("div");
document.addEventListener("click",clickHandler);
function clickHandler(e){
//千万别忘记写px，没有任何像素 div不动还不报错
div.style.left=Math.random()*(document.documentElement.clientWidth-div.offsetWidth)+"px";
div.style.top=Math.random()*(document.documentElement.clientHeight-div.offsetHeight)+"px";
//去除body的滚动条
// document.body.style.overflow="hidden";
}
</script>
</body>
</html>
案例二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>
*{
margin: 0;padding: 0;
}
div{
width: 100px;
height:100px;
margin-left: 50px;
margin-top:50px;
background-color: black;
position: absolute;
left:50px;
top: 50px;
border: 2px solid green;
}
</style> -->
<style>
#div1{
width: 200px;
height:200px;
background-color: greenyellow;
position: absolute;
left: 100px;
top:100px;
}
#div0{
width: 100px;
height:100px;
background-color: indianred;
position: relative;
left: 50px;
top:50px
}
</style>
</head>
<body>
<!-- <div id="div0">
</div>
<script>
var div=document.querySelector("div");
//这里的clinetLeft 和clinetTop为div的边框大小
console.log(div.clientLeft,div.clientTop);
//这里的offsetLeft和offsetTop为div盒子到页面左面和顶部的距离
//如果div父元素并且使用了定位属性，那么div的offsetLeft和offsetTop就是到父元素左上角的距离
console.log(div.offsetLeft,div.offsetTop);
</script> -->
<div id="div1">
<div id="div0"></div>
</div>
<script>
//新知识 如果div1的子元素有div0 并且都使用了定位属性，那么怎么计算出div0 到页面的距离呢
//getBoundingRect() 函数就是获取矩形的范围
// x：元素到页面左边的距离
// y：元素到页面顶端的距离
// left=x；
// top：y；
// right：元素最右边边线到页面左边的距离
// bottom：元素最下边的边线到页面顶部的距离
var div0=document.getElementById("div0");
console.log(div0.getBoundingClientRect());
</script>
</body>
</html>
滚动条案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
height: 4000px;
}
div{
width: 50px;
height: 50px;
background-color: cadetblue;
font-size: 40px;
line-height: 50px;
text-align: center;
position: fixed;
right: 100px;
bottom: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<p></p>
<div>^</div>
<script>
var div;
var bool;
init();
function init(){
//获取div 元素dom
div=document.querySelector("div");
//div透明100%
div.style.opacity="0";
//给文档添加滚动事件监听
document.addEventListener("scroll",scrollHandler);
//给div添加点击事件
div.addEventListener("click",clickHandler);
//执行setinterval 函数
setInterval(animation,16);
}
//滚动事件
function scrollHandler(e){
//如果滚动顶端超过100，div就显示 否则就隐藏
if(document.documentElement.scrollTop >100){
div.style.opacity="1";
}else{
div.style.opacity="0";
}
}
//点击事件
function clickHandler(e){
//设置bool为真
bool=true;
}
//持续执行
function animation(){
//如果bool值为假 跳出 不执行
if(!bool)return;
//如果滚动的top小于等于0的时候，bool值设为false 并且跳出当前函数 不在重复执行
if(document.documentElement.scrollTop<=0){
bool=false;
return;
}
//如果bool为真，那么滚动的top 每次减去300
document.documentElement.scrollTop-=300;
}
</script>
</body>
</html>
