Hexo
0%

javascript BOM 操作

发表于 更新于 分类于 ，

javascript BOM 操作：

1.获取浏览器窗口尺寸：

// 获取浏览器可视窗口的宽度
var w = window.innerWidth.toString()
// 获取浏览器可视窗口的高度
var h = window.innerHeight.toString()
document.write(w, '\n', h)

1440
1075

img

2.浏览器的弹出层：

// 提示框： window.alert('提示信息')   无返回值  点击后消失不见
window.alert('欢迎光临')

// 询问框： window.confirm('提示信息')   有返回值   确定为true  取消为false
var res = window.confirm('你爱我吗？')
console.log(res)

// 输入框： window.prompt('提示信息')    有返回值   返回值为输入内容
var res = window.prompt('请输入您的银行卡密码')
console.log(res)

img

3.开启和关闭标签页：

// 可视化窗口操作
// 开启
// 关闭
//点击开启按钮  打开百度

on.onclick = function () {
    window.open('https://www.baidu.com')
}
//点击关闭按钮 关闭浏览器标签页
off.onclick = function () {
    window.close()
}

img

4.浏览器常见事件：

// 4.浏览器常见事件：
资源加载完毕： window.onload = function () {}
可视尺寸改变：window.onresize = function () {}
滚动条位置改变：window.onscroll = function () {}

//  该函数会在资源加载完毕之后执行
window.onload = function () {
    console.log('资源加载完毕')
}
// 该函数会根据浏览器改变 而改变
window.onresize = function () {
    console.log('窗口尺寸发生了改变')
}

//该函数会根据浏览器滚动条改变 而改变
window.onscroll = function () {
    console.log('滚动条位置改变')
}

img

5.浏览器的历史记录操作：

回退页面：window.history.back()
前进页面：window.history.forward()

6.浏览器卷去的尺寸：

// 卷去的高度：
//兼容写法:
window.onscroll = function () {
    var height = document.documentElement.scrollTop || document.body.scrollTop
    console.log(height)
}

document.documentElement.scrollTop   // 当html有     使用
实例：
window.onscroll = function () {
    console.log(document.documentElement.scrollTop.toString())
}

document.body.scrollTop    // 当html没有     使用
window.onscroll = function () {
    console.log(document.body.scrollTop)
}

//卷去的宽度：
// document.documentElement.scrollLeft   //
// document.body.scrollLeft
// window.onscroll = function () {
//     console.log(document.body.scrollLeft)
// }
//兼容写法:
// window.onscroll = function () {
//     var width = document.documentElement.scrollLeft || document.body.scrollLeft
//     console.log(width)
// }

img

img

7.浏览器滚动到：

滚动到: window.scrollTo()

参数方式1： window.scrollTo(left, top)   // 这种方式只能定位到某个位置
参数方式2： window.scrollTo({left:xx, top:xx,})   // 这种方式可以滚动到某个位置
window.scrollTo({
    left: xx,  // 宽度
    top:xx,   //高度
    behavior: 'smooth'   //定位方式  直  平滑滚动
})

img

总结：

img

img

img

可视化窗口操作

body {
    width: 3000px;
    height: 3000px;
}
    
// 1.获取浏览器窗口尺寸：

// 获取浏览器可视窗口的宽度
var w = window.innerWidth.toString()
// 获取浏览器可视窗口的高度
var h = window.innerHeight.toString()
document.write(w, '\n', h)

// 2.浏览器的弹出层
// 提示框： window.alert('提示信息')   无返回值  点击后消失不见
// 询问框： window.confirm('提示信息')   有返回值   确定为true  取消为false
// 输入框： window.prompt('提示信息')    有返回值   返回值为输入内容

window.alert('欢迎光临')
var res = window.confirm('你爱我吗？')
console.log(res)

var res = window.prompt('请输入您的银行卡密码')
console.log(res)

// 3.开启和关闭标签页：
on.onclick = function () {
    window.open('https://www.baidu.com')
}
off.onclick = function () {
    window.close()
}

//4.浏览器常见事件：
资源加载完毕： window.onload = function () {}
可视尺寸改变：window.onresize = function () {}
滚动条位置改变：window.onscroll = function () {}

//  该函数会在资源加载完毕之后执行
window.onload = function () {
    console.log('资源加载完毕')
}

// 该函数会根据浏览器改变 而改变
window.onresize = function () {
    console.log('窗口尺寸发生了改变')
}

//该函数会根据浏览器滚动条改变 而改变
window.onscroll = function () {
    console.log('滚动条位置改变')
}

// 5.浏览器的历史记录操作：
回退页面：window.history.back()
前进页面：window.history.forward()

//6.浏览器卷去的尺寸：
//卷去的高度：
document.documentElement.scrollTop   //<!DOCTYPE html>
document.body.scrollTop
window.onscroll = function () {
    console.log(document.body.scrollTop)
}
//兼容写法:
window.onscroll = function () {
    var height = document.documentElement.scrollTop || document.body.scrollTop
    console.log(height)
}
//卷去的宽度：
document.documentElement.scrollLeft   //<!DOCTYPE html>
document.body.scrollLeft
window.onscroll = function () {
    console.log(document.body.scrollLeft)
}
//兼容写法:
window.onscroll = function () {
    var width = document.documentElement.scrollLeft || document.body.scrollLeft
    console.log(width)
}

参数方式1： window.scrollTo(left, top)   // 这种方式只能定位到某个位置
参数方式2： window.scrollTo({left:xx, top:xx, behavior: 'smooth'})   // 这种方式可以滚动到某个位置