JavaScript：三大家族

最新推荐文章于 2023-03-08 16:43:02 发布

KaiSarH

最新推荐文章于 2023-03-08 16:43:02 发布

阅读量787

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/KaiSarH/article/details/103683046

版权

JS 专栏收录该内容

118 篇文章 2 订阅

订阅专栏

严格模式和怪异模式

概念

早起的浏览器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 + padding
offsetWidth = 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