JS里的原生 BOM、offsetBOM、offset

最新推荐文章于 2022-08-22 09:59:10 发布

冒险岛_0_

最新推荐文章于 2022-08-22 09:59:10 发布

阅读量355

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_41741971/article/details/89917718

版权

Javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1、BOM（都是在window下面的）

DOM：文档对象模型（针对document下的节点的一些属性方法）；

BOM：浏览器对象模型（针对浏览器下面的节点的一些属性方法）

1、onresize 窗口改变事件

2、onscroll 滚动事件

3、close() 关闭当前窗口只能关闭脚本打开的窗口

4、open(url) 打开新页面

5、navigator.userAgent 浏览器的信息

6、location(.href .hash .search) hash--可以存放当前页面中所有的页面值（前提是这个锚点必须触发），#后面的页面

/* 获取浏览器的信息 */
console.log(navigator.userAgent);//MSIE
/* 
IE：
    Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E;     .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
谷歌：
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)            Chrome/73.0.3683.86 Safari/537.36
*/

/* 自动获取浏览器的宽高 */
window.onresize = function(){
    document.documentElement.clientWidth;  //获取宽度
    document.documentElement.clientHight;  //获取高度
    //document.body.clientHeigh; ---有兼容问题，一般不这样写
}

/* 滚动事件 并获取滚动的高*/
window.onscroll = function(){
    var a = document.documentElement.scrollTop;
    console.log(a);
}

/* 谷歌 */
document.body.onscroll = fucntion(){ //兼容IE7及以下
    console.log();
}
/* IE */
document.documentElement.onscroll = function(){ //只兼容IE浏览器
    console.log('IE');
}
/* 全部兼容 */
window.onscroll = function(){
    var a = document.documentElement.scrollTop;
    consloe.log(a);
}

/* 滚动事件兼容函数封装 */
function onscroll(callBack){
    navigator.userAgrnt.indexOf('MSIE') > -1?
        document.documentElement.onscroll = callBack:
        document.body.onscroll = callBack;
}

/* open() 打开新页面 */
document.onclik = function(){
    open('http://www.baidu.com');
}
/* close() 关闭页面 */
document.onclik = function(){
    close();
}
/* location */
location.href = 'http://www.baidu.com';
location.search;//返回?号后面搜索到的进行
location.hash;//返回页面值

2、offset

offsetParent:（如果父级没有到位，那么父级就是body）

自己的祖先元素中，里自己最近的定位元素，如果没有最近的定位元素，那么offsetParent就是body

offsetLeft offsetTop

一个元素的offsetLeft就是这个元素的左边框外，到自己offsetParent左边框内的距离，

offsetTop也是一样的原理；

var oCon = document.querySelector('#con');
var aP = document.querySelector('p');
aP.offsetLeft;
aP.offsetTop;

offsetWidth offsetHeight

盒子的总宽度和总高度 = width + padding（左右） + border（左右）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, ini
        ul, ol { list-style: none;}tial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        a {border: none;text-decoration: none;color: inherit;}
        * {margin: 0;padding: 0;}
        .clearfix:after{content: '';display: block;clear: both;}
        .fl-L{ float:left;}
        .fl-R{ float:right;}

        #con{
            position: relative;
            height: 100px;
            width: 100px;
            padding: 10px;
            border: 20px solid red;
        }

    </style>
    <title>Document</title>
</head>
<body>
    <div id="con">
        <p></p>
        <p></p>
    </div>

    <script>
        var oCon = document.querySelector('#con');
        var aP = document.querySelectorAll('p');
        console.log(oCon.offsetWidth);  //160
        console.log(oCon.offsetHeight); //160
        console.log(aP[0].offsetParent);
    </script>
</body>
</html>

clientWidth clientHeight（少了个border）

宽度和高度：width +padding（上下）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, ini
        ul, ol { list-style: none;}tial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        a {border: none;text-decoration: none;color: inherit;}
        * {margin: 0;padding: 0;}
        .clearfix:after{content: '';display: block;clear: both;}
        .fl-L{ float:left;}
        .fl-R{ float:right;}

        #con{
            position: relative;
            height: 100px;
            width: 100px;
            padding: 10px;
            border: 20px solid red;
        }

    </style>
    <title>Document</title>
</head>
<body>
<div id="con">
    <p></p>
    <p></p>
</div>

<script>
    var oCon = document.querySelector('#con');
    console.log(oCon.clientHeight);//120
    console.log(oCon.clientWidth);//120
</script>
</body>
</html>

scrollHeight

获取内容的实际高度，有没有隐藏都没有影响

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, ini
        ul, ol { list-style: none;}tial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        a {border: none;text-decoration: none;color: inherit;}
        * {margin: 0;padding: 0;}
        .clearfix:after{content: '';display: block;clear: both;}
        .fl-L{ float:left;}
        .fl-R{ float:right;}

        body{
            height: 8000px;
        }

        #con{
            position: relative;
            height: 100px;
            width: 100px;
            padding: 10px;
            border: 20px solid red;
            overflow: hidden;
        }

    </style>
    <title>Document</title>
</head>
<body>
<div id="con">
    <p></p>
    <p></p>
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
    我最崔傲
</div>

<script>
    var oCon = document.querySelector('#con');
    console.log(oCon.scrollHeight);
</script>
</body>
</html>

获取浏览器的宽高度

document.docmentElement.clientWidth --没有兼容性

document.body.clientWidth --没有兼容性

var a = document.documentElement.clientWidth;
var b = document.documentElement.clientHeight;
console.log(a);
console.log(b);

获取浏览器的滚动高度

document.docmentElement.scrollTop

/* 自动获取滚动高度  */
 onscroll(function () {
        var a = document.documentElement.scrollTop;
        console.log(a);
    });

    /* 滚动兼容 */
    function onscroll(callBack) {
        navigator.userAgent.indexOf('MSIE') > -1?
            document.documentElement.onscroll = callBack:
            document.body.onscroll = callBack;
    }

冒险岛_0_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS里的原生 BOM、offsetBOM、offset

1、BOM（都是在window下面的）DOM：文档对象模型（针对document下的节点的一些属性方法）；BOM：浏览器对象模型（针对浏览器下面的节点的一些属性方法）1、onresize 窗口改变事件2、onscroll 滚动事件3、close() 关闭当前窗口只能关闭脚本打开的窗口4、open(url) 打开新页面5、navigator.userAgent 浏览器的...
复制链接

扫一扫