从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(JS)
复习:从零开始学前端:查找替换+进度条+随机颜色+随机选择今日任务 — 今天你学习了吗?(JS:Day18)
文章目录
前言
最近有点忙,又拉下了。
第十五节课:CSSOM视图模式
CSSOM视图模式(CSS Object Model View)
如何知道页面的宽度与高度(获取页面可视区域的宽度
)
一、innerWidth/innerHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<box style="width:2000px;height:2000px;background-color: pink;"></box>
<!-- 滚动条不属于文档,是属于浏览器的,属于窗口的。 -->
<script>
// 获取窗口的内部的宽度与高度(获取页面可视区域的宽度);
// 内部浏览器边框的内容(包含滚动条);
console.log(window.innerWidth);
console.log(window.innerHeight);
</script>
</body>
</html>
效果图:
二、clientWidth/clientHeight
跟文档相关的,滚动条不属于文档,它属于浏览器的,属于窗口的。
// 跟文档元素相关,用document。
document.documentElement.clientWidth / clientHeight //不包含滚动条
// 获取文档可视区域的宽度与高度
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
// 没有兼容性的问题,IE8要再宽4个px;
padding + conentWidth/contentHeight(样式宽与样式高+padding)
// padding + conentWidth / contentHeight(样式宽与样式高 + padding)
// ele.cliendWidth/clientHeight 包含内部的padding;
//CSS
// #box {
// width: 200px;
// height: 200px;
// margin: 20px;
// padding: 10px;
// border: 5px solid;
// }
// html
// <div id="box"></div>
// JS
var box = document.getElementById('box');
console.log(box.clientHeight); //220
效果图:
三、offsetWidth/offsetHeight
整个盒子的占位大小 padding + border:
// padding + border + 样式宽 / 样式高 -> 元素的实际占位
console.log(box.offsetHeight)
// 同样没有兼容的问题
四、scrollHeight
获取ele的padding + width / height,但是如果子元素超多氟元素宽度时,会加上超出部分的宽高;
// 宽高 + padding + 超出的子元素的宽度和高度
// html
< div id="box" ></div >
alert(box.scrollHeight)
/*
但是如果子元素超过父元素宽度时,不受overflow:hidden的影响;
只管当前对象,不算子元素。
*/
效果图:
五、offsetTop/offfsetLeft
获取ele元素到定位父级的top和left方向的距离()
距离父级距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
position: absolute;
top: 500px;
left: 300px;
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
console.log(getComputedStyle(box).top)
console.log(getComputedStyle(box).left)
/*
文档距离定位父级top,与left的值;
*/
console.log(box.offsetTop)
console.log(box.offsetLeft)
</script>
</body>
</html>
效果:
可以看出前两个输出的是字符串类型,后两个输出的是数字类型。
- 定位父级值的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#father {
width: 800px;
height: 500px;
border: 5px solid #000;
margin: 100px auto 0;
}
#son {
width: 500px;
height: 300px;
border: 5px solid #00f;
margin: 100px auto;
}
#grandson {
width: 100px;
height: 100px;
background-color: #960;
margin: 100px auto;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
<div id="grandson"></div>
</div>
</div>
<script>
// 定位的值,如果父级及以上的包裹节点没有使用定位,以body作为参考
console.log(grandson.offsetTop, grandson.offsetLeft)
</script>
</body>
</html>
效果图:
将son改为绝对定位,father改为相对定位时:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#father {
width: 800px;
height: 500px;
border: 5px solid #000;
margin: 100px auto 0;
}
#son {
position: absolute;
top: 100px;
left: 100px;
width: 500px;
height: 300px;
border: 5px solid #00f;
margin: 100px auto;
}
#grandson {
width: 100px;
height: 100px;
background-color: #960;
margin: 100px auto;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
<div id="grandson"></div>
</div>
</div>
<script>
// 输出的值为grand距离son的距离
console.log(grandson.offsetTop, grandson.offsetLeft)
</script>
</body>
</html>
效果图:
- 获取元素到页面的顶部的距离
console.log(grandson.offsetTop, grandson.offsetLeft)
function getOffset(ele) {
var obj = {
top: 0,
left: 0
}
return obj
}
var offset1 = getOffset(grandson.offsetTop)
console.log(offset1)
</script>
效果图:
另一种获取:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#father {
position: relative;
width: 800px;
height: 500px;
border: 5px solid #000;
margin: 100px auto 0;
}
#son {
position: absolute;
top: 100px;
left: 100px;
width: 500px;
height: 300px;
border: 5px solid #00f;
/* margin: 100px auto; */
}
#grandson {
width: 100px;
height: 100px;
background-color: #960;
margin: 100px auto;
}
</style>
</head>
<body>
<div id="father">
<div id="son">
<div id="grandson"></div>
</div>
</div>
<script>
// 定位的值,如果父级及以上的包裹节点没有使用定位,以body作为参考
// 输出的值为距离body的距离
// console.log(grandson.offsetTop, grandson.offsetLeft)
function getOffset(ele) {
var obj = {
top: 0,
left: 0
}
if (ele !== document.body) {
obj.top = obj.top + ele.offsetTop
}
return obj
}
function getStyle(obj) {
return obj.currentStyle || getComputedStyle(obj)
}
// var offset1 = getOffset(grandson.offsetTop)
// console.log(offset1)
console.log(getOffset(grandson).top, getOffset(grandson).left)
</script>
</body>
</html>
效果:
六、scollTop/ScrollLeft
获取元素的滚动距离,滚动了多少距离,也就打印多少。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 2000px;
}
#box {
width: 100px;
height: 100px;
background-color: #f90;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
console.log(document.documentElement.scrollTop);
// [x轴或y轴的滚动距离]、在赋值时,不能带px单位,否则报错。
// 可读可写
document.documentElement.scrollTop = 1000;
// console.log(document.documentElement.scrollTop);
console.log(window.scrollTop) // undefined;
// 获取页面的实际高度:[给body标签加宽度与高度]
document.body.offsetHeight;
document.body.offsetWidth;
</script>
</body>
</html>
效果:
七、鼠标事件clientX/clientY
- 获取鼠标到文档可视区域的top和left方向的距离;
//没有兼容性的问题
document.onclick = function(e){
//e为事件源、为鼠标事件对象
console.log(e)
console.log(e.clientX)
console.log(e.clientY)
}
//注意:是文档可视区而不是页面的顶部区域
八、pageX/pageY
/*
事件对象:记录本次事件对象信息相关的对象;
在主浏览器里,是时间函数的第一个参数;
在低版本的IE里,是在window.event属性下;
*/
//不支持破浏览器
document.onclick = function(e){
console.log(e.pageY)
}
//在低版本里,e是undefined;每一次事件的事件对象不是第一个形参,是window,event;window.event是IE里面的事件对象;
/*
事件对象:记录本次事件对象信息相关的对象;
在主流浏览器里,是事件函数的第一个参数;
在低版本的IE里,是在window.event属性下;
*/
pageX/pageY兼容问题
/*
兼容问题,
滚动高+clientY
滚动宽+clientX
*/
document.onclick = function(e){
e = e || window.event; //在低版本的IE里,是在window.event属性下;
if(!e.pageX){ //判断是否在IE时为undefined
//兼容做法:被动条遮起的高度+可视区域的宽高坐标;
console.log(document.documentElement.scrollTop + e.clientY) //只能在IE使用;
}else{
console.log(e.pageY)
}
}
九、onresize
窗口大小发生改变的时候触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 可视区域的高
console.log(document.documentElement.clientHeight) //如果需要在一开始的时候有大小,需一开始也定义;
window.onresize = function () { //窗口大小发生改变的时候触发;
console.log(document.documentElement.clientHeight)
}
</script>
</body>
</html>
效果: