0
点赞
收藏
分享

微信扫一扫

JavaScript:三大家族

耶也夜 2022-03-12 阅读 63



文章目录


  • ​​严格模式和怪异模式​​

  • ​​概念​​
  • ​​使用​​

  • ​​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

概念


  1. 当窗口或框架的大小发生改变的时候就会调用
  2. onresize一般被运用于自使用页面布局等多屏幕适配场景

获取屏幕的可视区域

ie9及其以上的版本、最新浏览器

window.innerWidth
window.innerHeight

标准模式浏览器

document.documentElement.clientWidth
document.documentElement.clientHeight

怪异模式浏览器

document.body.clientWidth
document.body.clientHeighe

三大家族

offSet家族

概念


  1. offSet:自己的,用于获取元素自己尺寸
  2. 图示
    JavaScript:三大家族_严格模式

offsetWidth 和 offsetHeight


  1. 获取对象自身的宽度和高度,包括内容、边框和内边距
    offsetWidth = width + border + paddingoffsetWidth = width + border + padding
  2. 案例
<!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>
运行结果:
JavaScript:三大家族_严格模式_02
注意:​使用box.style.width获取宽度的时候,只能获取到行内定义的width。

offsetLeft 和 offsetTop


  1. 距离第一个有定位的父级盒子左边和上边的距离
  2. 注意:父级盒子必须要有定位,如果没有,最终以body为准。
  3. 图示:
    JavaScript:三大家族_html_03
  4. 总结:offsetLeft和offsetTop从父标签的padding开始计算,不包括border。
    即:​从子盒子边框到定位父盒子边框的距离。
  5. 案例
    ① 无父级元素有定位,相对于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>
运行结果:
JavaScript:三大家族_html_04
② 父级盒子有定位,相对于第一个有定位的父级盒子进行求解
<!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>
运行结果:
JavaScript:三大家族_html_05

offsetParent


  1. 返回当前对象的父级(​带有定位​)盒子,可能是父亲、也可能是爷爷
  2. 说明
  3. 注意
  4. 案例
<!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>
运行结果:
JavaScript:三大家族_严格模式_06

offset×××和style.×××的区别


  1. style.left只能获取行内的
    而offsetLeft则可以获取到所有的
  2. offsetLeft可能返回没有定位盒子距离左侧的位置
    而style.left不可以,只能返回带有盒子定位的left
  3. offsetLeft返回的是数字
    style.left返回的是字符串,数字+px
  4. offsetLeft是只读的
    style.left是可读写的
  5. 如果没有给当前元素指定过top样式,style.top返回的是空字符串

scroll家族

概念


  1. 网页正文全文宽:document.body.scrollWidth
  2. 网页正文全文高:document.body.scrollHeight
  3. 网页被卷去的高:document.body.scrollTop
  4. 网页被卷去的左:document.body.scrollLeft
  5. 注意:实际开发中用的比较多的就是scrollTop
    JavaScript:三大家族_html_07

适配


  1. ie9+ 和 最新浏览器​​window.pageXOffset; (scrollLeft) window.pageYOffset; (scrollTop) ​
  2. FireFox浏览器 和其他浏览器​​document.documentElement.srcollTop ​
  3. Chrome浏览器和没有声明​​document.body.scrollTop ​
  4. 兼容写法​​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)


  1. 把内容滚动到指定的坐标
  2. 格式:scrollTo(xpos,ypos)
  3. xpos 必需:要在窗口文档显示区左上角显示的文档的x坐标
  4. ypos 必需:要在窗口文档显示区左上角显示的文档的y坐标

client家族

概念


  1. 网页可见区域宽:documen.body.clientWidth
  2. 网页可见区域高:document.body.clientHeight
  3. clientLeft和clientTop:返回的是元素边框的borderWidth
    如果不指定一个边框或者不定位该元素,其值为0

offset、client和scroll的区别分析

left和top分析


  1. offset:取距离父盒子的距离
    ① offsetLeft:当前元素距离有定位的父盒子左边的距离
    ② offsetTop:当前元素距离有定位的父盒子上边的距离
  2. client:取边框的宽度
    ① clientLeft:左边边框的宽度
    ② clientTop:上边边框的宽度
  3. scroll
    ① scrollLeft:左边滚动的长度
    ② scrollTop:上边滚动的长度

width和height分析


  1. offset:border + padding + 内容宽度和高度
  2. client:padding + 内容宽度和高度
  3. scroll:里面能够滚动的内容的宽度和高度

图示

JavaScript:三大家族_严格模式_08



举报

相关推荐

0 条评论