BOM 操作

最新推荐文章于 2025-02-05 16:35:44 发布

原创最新推荐文章于 2025-02-05 16:35:44 发布 · 178 阅读

CC 4.0 BY-SA版权

本文深入讲解了浏览器对象模型(BOM)的基本操作，包括弹窗操作如提示框、输入框、确认框的使用方法，以及如何获取和设定浏览器滚动条的高度和宽度。探讨了不同浏览器间的兼容性问题，并提供了兼容性的解决方案。

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

弹窗操作
1,提示框 / 警告框
// window.alert(‘弹出内容\n警告内容’);
2，输入框
// 作用: window.prompt(‘提示内容’);
// 弹出一个输入框,可以输入数据,()中定义的内容,作为输入数据的提示内容
// 输入框执行结果,可以使用变量来存储
// 存储的内容,是数据的数据内容
将纯数字的字符串转化为数值类型方法

    // 方法1 : parseInt()    获取整数部分
    // var res1 = parseInt(window.prompt('请输入密码'));
    // console.log(res1);
    方法2 : 执行非 加法的 不影响数值的 运算
    // var res2 = window.prompt('请输入密码') - 0 ;
    // var res2 = window.prompt('请输入密码') * 1 ;
    // var res2 = window.prompt('请输入密码') / 1 ;
    方法3 : 在数值前,添加 + 正号 / - 符号
    // 获取 正数 的部分
    // 但是要注意,正数和负数的问题
    // + 正号 : 正数获取的正数结果   负数获取的是负数结果
    // - 符号 : 正数获取的负数结果   负数获取的是正数结果

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

获取浏览器滚动条高度
获取高度的兼容性
// 有没有文档类型声明
// 有 : document.documentElement.scrollTop;
// 没有 : document.body.scrollTop;
// 如果获取方式错误,程序不会报错,只是获取的结果是0
兼容处理
浏览器上卷的高度
// var height = document.documentElement.scrollTop || document.body.scrollTop

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

还可以利用属性来设定

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