0
点赞
收藏
分享

微信扫一扫

JavaScript：三大家族

耶也夜 2022-03-12 阅读 65
html严格模式css



文章目录


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

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

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

概念


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

获取屏幕的可视区域

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

window.innerWidth
window.innerHeight

标准模式浏览器

document.documentElement.clientWidth
document.documentElement.clientHeight

怪异模式浏览器

document.body.clientWidth
document.body.clientHeighe

三大家族

offSet家族

概念


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

offsetWidth 和 offsetHeight


  2. 获取对象自身的宽度和高度，包括内容、边框和内边距
    ​offsetWidth = width + border + paddingoffsetWidth = width + border + padding​
  4. 案例
<!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


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


  2. 返回当前对象的父级（​带有定位​）盒子，可能是父亲、也可能是爷爷
  3. 说明
  4. 注意
  6. 案例
<!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.×××的区别


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

scroll家族

概念


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

适配


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


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

client家族

概念


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

offset、client和scroll的区别分析

left和top分析


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

width和height分析


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

图示

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



举报

相关推荐

三大家族相关案例

三大家族html进度条

Hadoop 2.0 大家族（一）

大数据分布式hadoop

京华烟云|从大家族的变迁看时代风云变幻

随笔想法散文简友广场故事读书

极智AI | 变形金刚大家族 Transformer ViT CLIP BLIP BERT 模型结构

transformerbertnlp多模态深度学习前端开发

阿里P8java程序员讲的Spring大家族原理汇总，不看后悔系列

面试编程语言java经验分享开发语言

机器学习-Sklearn-13（回归类大家族-下——非线性问题：多项式回归(多项式变换后形成新特征矩阵)）

sklearnpython机器学习

JavaScript-三大内置对象

服务器ecmascriptjavascriptJavaScript前端开发

这次教大家JavaScript 表单验证

数据html表单Java编程语言

javascript三大流程控制语句

while循环htmli++HarmonyOS后端开发

JavaScript-228：三大系列总结

javascript
0 条评论