文章目录
- 严格模式和怪异模式
- 概念
- 使用
- onresize
- 概念
- 获取屏幕的可视区域
- ie9及其以上的版本、最新浏览器
- 标准模式浏览器
- 怪异模式浏览器
- 三大家族
- offSet家族
- 概念
- offsetWidth 和 offsetHeight
- offsetLeft 和 offsetTop
- offsetParent
- offset×××和style.×××的区别
- scroll家族
- 概念
- 适配
- scrollTo(x,y)
- client家族
- 概念
- offset、client和scroll的区别分析
- left和top分析
- width和height分析
- 图示
严格模式和怪异模式
概念
早起的浏览器Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式被我们称之为:quirks mode 怪异模式
但随着W3C的标准越来越重要,众多浏览器开始根据W3C标准解析css,仿照W3C标准解析css的模式我们称之为:strict mode严格模式
使用
document.compatMode
返回值为:BackCompat 则为怪异模式
返回值为:CSS1Compat 则为严格模式
onresize
概念
- 当窗口或框架的大小发生改变的时候就会调用
- onresize一般被运用于自使用页面布局等多屏幕适配场景
获取屏幕的可视区域
ie9及其以上的版本、最新浏览器
window.innerWidth
window.innerHeight
标准模式浏览器
document.documentElement.clientWidth
document.documentElement.clientHeight
怪异模式浏览器
document.body.clientWidth
document.body.clientHeighe
三大家族
offSet家族
概念
- offSet:自己的,用于获取元素自己尺寸
- 图示
offsetWidth 和 offsetHeight
- 获取对象自身的宽度和高度,包括内容、边框和内边距
offsetWidth = width + border + paddingoffsetWidth = width + border + padding - 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 150px;
background-color: red;
padding: 10px;
border: 5px solid #000;
margin: 20px;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box_box" style="height: 180px;width: 180px"></div>
<script>
var box = document.getElementById('box');
var box_box = document.getElementById('box_box');
console.log(box.offsetWidth,box.offsetHeight);
console.log(box.style.width,box.style.height);
console.log(box_box.style.width,box_box.style.height);
</script>
</body>
</html>
运行结果:
注意:使用box.style.width获取宽度的时候,只能获取到行内定义的width。
offsetLeft 和 offsetTop
- 距离第一个有定位的父级盒子左边和上边的距离
- 注意:父级盒子必须要有定位,如果没有,最终以body为准。
- 图示:
- 总结:offsetLeft和offsetTop从父标签的padding开始计算,不包括border。
即:从子盒子边框到定位父盒子边框的距离。 - 案例
① 无父级元素有定位,相对于body进行求解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#father{
width: 400px;
height: 400px;
margin: 40px;
background-color: red;
}
#box{
width: 200px;
height: 150px;
margin-left: 30px;
padding: 10px;
background-color: blue;
border: 5px solid #000;
}
</style>
</head>
<body>
<div id="father">
<div id="box"></div>
</div>
<script>
var box = document.getElementById('box');
console.log(box.offsetLeft);
console.log(box.offsetTop);
</script>
</body>
</html>
运行结果:
② 父级盒子有定位,相对于第一个有定位的父级盒子进行求解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#father{
width: 400px;
height: 400px;
margin: 40px;
background-color: red;
/*定位*/
position: relative;
}
#box{
width: 200px;
height: 150px;
margin-left: 30px;
padding: 10px;
background-color: blue;
border: 5px solid #000;
}
</style>
</head>
<body>
<div id="father">
<div id="box"></div>
</div>
<script>
var box = document.getElementById('box');
console.log(box.offsetLeft);
console.log(box.offsetTop);
</script>
</body>
</html>
运行结果:
offsetParent
- 返回当前对象的父级(带有定位)盒子,可能是父亲、也可能是爷爷
- 说明
- 注意
- 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="grapa">
<div id="papa">
<div id="son"></div>
</div>
</div>
<div id="grapa1" style="position: relative;">
<div id="papa1">
<div id="son1"></div>
</div>
</div>
<div id="grapa2" style="position: relative;">
<div id="papa2" style="position: relative;">
<div id="son2"></div>
</div>
</div>
<script>
var son = document.getElementById('son');
console.log(son.offsetParent);
console.log(son.parentNode);
var son1 = document.getElementById('son1');
console.log(son1.offsetParent);
var son2 = document.getElementById('son2');
console.log(son2.offsetParent);
</script>
</body>
</html>
运行结果:
offset×××和style.×××的区别
- style.left只能获取行内的
而offsetLeft则可以获取到所有的 - offsetLeft可能返回没有定位盒子距离左侧的位置
而style.left不可以,只能返回带有盒子定位的left - offsetLeft返回的是数字
style.left返回的是字符串,数字+px - offsetLeft是只读的
style.left是可读写的 - 如果没有给当前元素指定过top样式,style.top返回的是空字符串
scroll家族
概念
- 网页正文全文宽:document.body.scrollWidth
- 网页正文全文高:document.body.scrollHeight
- 网页被卷去的高:document.body.scrollTop
- 网页被卷去的左:document.body.scrollLeft
- 注意:实际开发中用的比较多的就是scrollTop
适配
- ie9+ 和 最新浏览器
window.pageXOffset; (scrollLeft) window.pageYOffset; (scrollTop)
- FireFox浏览器 和其他浏览器
document.documentElement.srcollTop
- Chrome浏览器和没有声明
document.body.scrollTop
- 兼容写法
var scrollTop = window.pageYOffset||document.documentElement.srcollTop||document.body.scrollTop||0 var scrollLeft = window.pageXOffset||document.documentElement.scrollLedf||document.body.scrollLeft||0
scrollTo(x,y)
- 把内容滚动到指定的坐标
- 格式:scrollTo(xpos,ypos)
- xpos 必需:要在窗口文档显示区左上角显示的文档的x坐标
- ypos 必需:要在窗口文档显示区左上角显示的文档的y坐标
client家族
概念
- 网页可见区域宽:documen.body.clientWidth
- 网页可见区域高:document.body.clientHeight
- clientLeft和clientTop:返回的是元素边框的borderWidth
如果不指定一个边框或者不定位该元素,其值为0
offset、client和scroll的区别分析
left和top分析
- offset:取距离父盒子的距离
① offsetLeft:当前元素距离有定位的父盒子左边的距离
② offsetTop:当前元素距离有定位的父盒子上边的距离 - client:取边框的宽度
① clientLeft:左边边框的宽度
② clientTop:上边边框的宽度 - scroll
① scrollLeft:左边滚动的长度
② scrollTop:上边滚动的长度
width和height分析
- offset:border + padding + 内容宽度和高度
- client:padding + 内容宽度和高度
- scroll:里面能够滚动的内容的宽度和高度