JS BOM 操作

最新推荐文章于 2024-03-13 19:35:06 发布

珎珎啊

最新推荐文章于 2024-03-13 19:35:06 发布

阅读量123

点赞数

分类专栏：前端文章标签： javascript js

本文链接：https://blog.csdn.net/qq_43363773/article/details/105103013

版权

前端专栏收录该内容

113 篇文章 1 订阅

订阅专栏

BOM 操作

浏览器对象模型
可以操作浏览器的方法
所谓的操作浏览器的方法,是各个浏览器厂商提供给我们的
浏览器厂商允许我们操作浏览器,我们才可以操作,如果不允许,就不能操作
各个浏览器厂商,都有自己的特点,因此,BOM操作,有兼容性需要考虑

浏览器三大弹窗操作

1. 提示框 / 警告框

    window.alert('弹出内容\n警告内容');

转义符:类似于 HTML中的字符实体是为了解决输入内容和JavaScript代码的冲突.

 		例如,要在弹框中,实现换行
          \n  换行
        \'  单引号
        \"  双引号
        \r  回车
        \t  横向跳格 (Ctrl-I)
        \\  反斜杠
        \f  纵向的间隔
        注意:各个浏览器对转移符的支持效果不同,执行效果也不一样
             我们只要记住前三个就可以了

2. 输入框

作用: window.prompt(‘提示内容’);
弹出一个输入框,可以输入数据,()中定义的内容,作为输入数据的提示内容
输入框执行结果,可以使用变量来存储
存储的内容,是数据的数据内容
问题: 输入的数据,存储的方式是,字符串类型
如果是输入数值,需要计算,必须把数据类型转化为数值

     var userName = window.prompt('请输入账号');
     var userPwd = window.prompt('请输入密码');
     console.log(userName,userPwd);

将纯数字的字符串转化为数值类型方法
(1) 方法1 : parseInt() 获取整数部分

      var res1 = parseInt(window.prompt('请输入密码'));
      console.log(res1);

(2) 方法2 : 执行非加法的不影响数值的运算

var res2 = window.prompt('请输入密码') - 0 ;
var res2 = window.prompt('请输入密码') * 1 ;
var res2 = window.prompt('请输入密码') / 1 ;
console.log(res2);

(3) 方法3 : 在数值前,添加 + 正号 / - 符号
获取正数的部分
但是要注意,正数和负数的问题
+ 正号 : 正数获取的正数结果负数获取的是负数结果
- 符号 : 正数获取的负数结果负数获取的是正数结果

     var res2 = -window.prompt('请输入密码');
     console.log(res2);

3. 确认框

作用: window.confirm(‘提示内容’);
点击确定按钮,window.confirm()执行结果,返回值是 true
点击取消按钮,window.confirm()执行结果,返回值是 false
可以根据,返回值,执行不同的操作

    var res = window.confirm('请问您是否确定删除这个邮件');
    console.log(res);

bom操作获取浏览器滚动条高度

获取浏览器滚动条高度
获取浏览器滚动条,分为宽度和高度两个属性
获取浏览器滚动条的高度,宽度
获取高度的兼容性
有没有文档类型声明 < ! DOCTYPE html >
有 : document.documentElement.scrollTop ;
没有 : document.body.scrollTop;
如果获取方式错误,程序不会报错,只是获取的结果是0
实际当中要确保,始终可以获取到正确的数值,不管有没有文档类型声明
做兼容处理
var 变量 = 方式1 || 方式2 ;
当方式1有结果时,数值会转化为 true , 方式2,就不会执行
变量中存储的是方式1,获取的结果
当方式1结果是0时,数值会转化为 false , 方式2会执行
变量中,先存储方式1的结果0,再存储方式2的结果,最终为方位2的结果
最终的效果,就是确保变量中,始终有数值存储,

<style>
        body{
            width: 3000px;
            height: 3000px;
        }
    </style>
</head>
<body>
    <script>
           var height1 = document.documentElement.scrollTop;
           var height2 = document.body.scrollTop;
           console.log(height1 , height2);

        // 实际当中要确保,始终可以获取到正确的数值,不管有没有文档类型声明
        // 做 兼容处理 
        // var 变量 = 方式1 || 方式2 ;
        // 当方式1有结果时,数值会转化为 true , 方式2,就不会执行
        //        变量中存储的是方式1,获取的结果
        // 当方式1结果是0时,数值会转化为 false , 方式2会执行
        //        变量中,先存储方式1的结果0,再存储方式2的结果,最终为方位2的结果

        // 最终的效果,就是确保变量中,始终有数值存储,

        // console.log(document.documentElement.scrollTop);
        // console.log(document.body.scrollTop);

        // 浏览器上卷的高度
        // var height = document.documentElement.scrollTop || document.body.scrollTop

        // 浏览器移动的宽度
        // var width = document.documentElement.scrollLeft || document.body.scrollLeft;

        // console.log(height , width);

        // 还可以利用属性来设定

        // 设定滚动条,移动的宽度和高度
        // 直接设定数值就可以,不要加PX
        document.documentElement.scrollTop = 500;
        document.documentElement.scrollLeft = 500;

浏览器滚动条操作demo

<head>
 <style>
        * {margin: 0;padding: 0;}
        body {height: 5000px;}
        .box {width: 100%;
            position: fixed;
            top: 0;
            display: none;}
        .top {width: 800px;
            margin: 0 auto;
            line-height: 100px;}
        img { height: 50px;
            vertical-align: middle;
            margin-right: 30px;}
        input {height: 70px;
            width: 500px;}
        button {height: 70px;
            width: 100px;}
        .sidebar {
        	width: 30px;
            font-size: 30px;
            position: fixed;
            right: 100px;
            top: 400px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <div class="top" id="top">
            <img src="./1.png" alt=""><input type="text"><button>百度一下</button>
        </div>
    </div>
    <div class="sidebar" id="sidebar">
        侧边栏内容
    </div>
    <script>
        // 通过id属性值,来获取标签对象
        // oDiv,就是id属性值是top的标签
        // 之间是通过id属性值,直接操作标签
        // 现在直接放在事件中,不能使用,必须要先获取标签对象
        // 语法: document.getElementById('标签id属性值');

        // 一般使用class来定义样式
        // 一般使用id来获取标签对象

        var oDiv1 = document.getElementById('box');
        var oDiv2 = document.getElementById('sidebar');
        // console.log(oDiv1 , oDiv2);

        // 通过事件来实现效果
        // window.onscroll  页面滚动条事件
        // 当页面滚动条发生改变时,会触发需要执行的程序

        window.onscroll = function () {
            // 当滚动条,也就是页面位置,发生改变时,会触发执行的程序

            // 获取当前浏览器上卷的高度
            var height = document.documentElement.scrollTop || document.body.scrollTop;

            // 如果浏览器上卷的高度,大于 500 时 , 执行程序
            if (height > 500) {
                // 设定 div 的显示属性为 block ,就可以显示了
                oDiv1.style.display = 'block';
                oDiv2.style.display = 'block';
            } else {
                // 设定 高度 <= 500 是,让div消失隐藏
                oDiv1.style.display = 'none';
                oDiv2.style.display = 'none';
            }
        }
        // 后续将jQuery时,会讲动画效果
        // 当前使用css也是可以实现,不过执行效果不如jQuery

珎珎啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS BOM 操作

BOM 操作浏览器对象模型可以操作浏览器的方法所谓的操作浏览器的方法,是各个浏览器厂商提供给我们的浏览器厂商允许我们操作浏览器,我们才可以操作,如果不允许,就不能操作各个浏览器厂商,都有自己的特点,因此,BOM操作,有兼容性需要考虑浏览器三大弹窗操作1. 提示框 / 警告框 window.alert('弹出内容\n警告内容'); 转义符:类似于 HTML中的字符实体 ...
复制链接

扫一扫