JS学习笔记08-浏览器BOM

最新推荐文章于 2024-01-19 15:54:12 发布

优雅哥cc

最新推荐文章于 2024-01-19 15:54:12 发布

阅读量7.1k

点赞数 1

分类专栏： JS学习笔记文章标签： javascript js window

本文链接：https://blog.csdn.net/weixin_43742708/article/details/105906403

版权

JS学习笔记专栏收录该内容

29 篇文章 2 订阅

订阅专栏

文章目录

一、BOM基础
二、尺寸及坐标
三、常用方法和事件
四、系统对话框
- 4.1 confirm() 弹出带有确认，与取消的按钮
- 4.2 prompt() 弹出带有输入框的提示框

一、BOM基础

1.1 打开窗口

点击按钮，即可打开一个标签页并且四指定的目网址

<body>
    <input type="button" value="打开窗口" onclick="window.open('https://www.baidu.com')">
</body>

在这里插入图片描述
用法二：
打开窗口，并且往里边添加内容

<body>
    <textarea id="txt1" cols="100" rows="40"></textarea>
    <input type="button" value="运行" id="btn1">
</body>

<script>
    window.onload=function(){
        var txt1 = document.getElementById('txt1');
        var btn1 = document.getElementById('btn1');

        btn1.onclick=function(){
            //_black  打开新窗口
            //_self   当前窗口
            var Newwin = window.open('about:blank','_balck')
            Newwin.document.write(txt1.value);
        }
    }
</script>

这样子的话，我们可以把txt1 文本域的东西，直接给他添加到新打开的窗口当中

1.2 关闭窗口

window.close()
点击该按钮后，即可关闭当前窗口

<body>
    <input type="button" value="close" onclick="window.close();">
</body>

注意：

IE下会弹出警告框
Firefox 会直接error

解决办法：

需要使用window.open()打开，才能使用window.close()关闭

1.3 常用属性

1.3.1 window.navigator.userAgent 浏览器信息客户端信息

userAgent里边包含了很多跟浏览器相关的信息。常用来判断浏览器类型

如果想来判断其中内容，可以用navigator.userAgent.match()或navigator.userAgent.indexOf()来判断
前者一般是用来判断手机客户端，例如navigator.userAgent.match(/iPhone/i) , navigator.userAgent.match(/Safari/i)
后者用来变向判断userAgent字符串中某值是否存在，例如 navigator.userAgent.indexOf(“iPhone OS 4_0_2”) !=-1

<script>
    alert(window.navigator.userAgent);
</script>

在这里插入图片描述

1.3.2 window.location url信息

当前页面的浏览器地址，可以使用 location 来设置页码

下面这段会弹出当前浏览器地址

<script>
    alert(window.location);
</script>

这段代码的作用是，当我们点击该按钮后，会跳转到百度首页

<body>
    <input type="button" value="跳转" onclick="window.location='https://www.baidu.com'">
</body>

1.4 补充知识

补充一点知识： window.write()
如果是当作事件来用的话，document.write(‘abc’);
会把页面上所有元素都删除，只剩下abc

二、尺寸及坐标

在这里插入图片描述
可视区：不包括 顶部的书签栏 以及底部的滚动条

2.1 clientWidth; 可视区的宽度

2.2 clientHeight；可视区的高度

<body>
    <input type="button" value="可视区大小" id="btn1">
</body>
<script>
    window.onload=function(){
        var btn = document.getElementById('btn1');
        btn.onclick=function(){
            alert('宽:'+document.documentElement.clientWidth);//1536
            alert('高:'+document.documentElement.clientHeight);//772
        }
    }
</script>

2.3 scrollTop 元素内容到窗口顶部的距离(可写)

Element.scrollTop 属性可以获取或设置一个元素的内容到窗口顶部的距离，不包括工具栏。
详细信息请访问：MDN

一个元素的 scrollTop 值是这个元素的内容顶部到它的视口可见内容的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

当页面往下滚动的时候，scrollTop的值在不断增大

scrollTop 可以被设置为任何整数值，同时注意：

在使用显示比例缩放的系统上，scrollTop可能会提供一个小数。
如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0。
设置scrollTop的值小于0，scrollTop 被设为0
如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。

<body style="height: 2000px;">
    
</body>
<script>
    document.onscroll=function(){
        console.log(document.documentElement.scrollTop);
    }
</script>

注意：这里我们虽然设置了body为2000的高度，但是当我们滚到到最低端的时候，它的值最大就为1293.xxxx

效果：
滚动到顶部
在这里插入图片描述
滚动到底部：

2.4 scrollHieght 元素内容的高度

Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。
详细信息请访问官方文档:MDN

scrollHeight的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

2.4 offsetTop:元素到offsetParent顶部的距离

1、 offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。
在这里插入图片描述
2、注意：只有元素show（渲染完成）才会计算入offsetTop，若是中间有元素数据需要异步获取，会导致最终获取的offsetTop值偏小

2.5 offsetLeft 元素与上一级定位元素的距离

offsetLeft值跟offsetTop值的获取跟父级元素没关系，而是跟其上一级的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有关系。

2.6 offsetHeight 元素的高度只读(不包括margin)

包括padding、border、水平滚动条，但不包括margin的元素的高度。
对于inline的元素这个属性一直是0，单位px，只读元素。
在这里插入图片描述

2.7 总结

scrollHieght元素的总高度
scrollWidth元素的总宽度
- 不包括外边距 包括内边距和边框
clientHeight可视区高度
clientWidth可视区宽度
scrollTop 可视区顶端距离页面顶端的距离
在使用显示比例缩放的系统上或特殊情况下，scrollTop可能会提供一个小数。

2.8 框架：获取绝对的left or top

/* 
    参数:obj 需要获取left或者top的对象
    参数:direction  left 或者top
*/
function offset(obj, direction) {
    //将top,left首字母大写,并拼接成offsetTop,offsetLeft
    let offsetDir = 'offset' + direction[0].toUpperCase() + direction.substring(1);

    //let realNum = obj[offsetDir]的意思就是obj.offsetLeft或者obj.offsetTop 在JS里边一切可以使用 . 的地方 都可以使用 [] 
    let realNum = obj[offsetDir];

    let positionParent = obj.offsetParent;//获取上一级定位元素对象

    while (positionParent != null) {
        realNum += positionParent[offsetDir];
        positionParent = positionParent.offsetParent;
    }
    return realNum;
}

三、常用方法和事件

3.1 系统对话框

3.2 window对象常用事件

3.2.1 .onscroll 当页面滚动的时候触发事件

3.2.2 .onresize 当窗口改变大小的时候触发事件

使用JS实现让元素固定在某个位置。

<body>
    <div id="div1"></div>
</body>

<style>
    #div1{
        width: 200px;
        height: 159px;
        background: red;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    body{
        height: 2000px;
    }
</style>

<script>
    window.onscroll=function(){
        var scrollTop = document.documentElement.scrollTop;
        var div = document.getElementById('div1');

        div.style.top=document.documentElement.clientHeight-div.offsetHeight+scrollTop+'px';
    }
</script>

效果：
在这里插入图片描述

四、系统对话框

4.1 confirm() 弹出带有确认，与取消的按钮

<body>
    <p id="demo"></p>
</body>

<script>
    window.onload=function(){
        var p = document.getElementById('demo');
        var r = window.confirm('您确定要删除吗？')
        if(r==true){
            p.innerHTML='您按下了确定按钮！';
        }else{
            p.innerHTML='您按下了取消按钮!';
        }
    }
</script>

** 加粗样式
**

4.2 prompt() 弹出带有输入框的提示框

<body>
    <p id="demo"></p>
</body>

<script>
    window.onload=function(){
        var result = prompt('请输入您的姓名:','null')
        document.getElementById("demo").innerHTML=result;
    }
</script>

在这里插入图片描述

优雅哥cc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS学习笔记08-浏览器BOM

文章目录一、BOM基础1.1 打开窗口1.2 关闭窗口1.3 常用属性1.3.1 window.navigator.userAgent 浏览器信息客户端信息1.3.2 window.location url信息1.4 补充知识二、尺寸及坐标2.1 clientWidth; 可视区的宽度2.2 clientHeight；可视区的高度2.3 scrollTop 到页面顶端的距离(可写)三、常用方...
复制链接

扫一扫