本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于bom操作的相关问题，包括了window对象的常见事件、javascript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。
【相关推荐：javascript视频教程、web前端】
窗口加载事件：
调整窗口大小的事件：
立即学习“Java免费学习笔记（深入）”；
window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口
计时器：
window.scroll(x, y)
window.scrollTo(x, y)：两者是一样的用法 改变横向和垂直的滚动条的位置，前提是必须有滚动条在页面中
window.scrollBy(x, y)：滚动条的累加滚动，正数向下 ，负数向上 window.scrollBy(0, 10)：每100毫秒调用一次的时候，滚动条运动10个像素
window.getComputedStyle(elem, 伪类)
对话框
运行js脚本，将js代码以同步执行方式放入执行栈，运行执行栈过程中遇见JS异步代码（事件、计时器、ajax、资源加载load、error）放入web APIs（任务队列），当执行栈里的代码运行完成以后，去任务队列里拿第一个进行执行，执行外以后在去任务队列拿一个过来执行，反复执行（事件循环）直到任务队列里的执行完成
window.history 用于获取当前页面的地址URL，并把浏览器重定向到新的页面
http://www.itcast.cn:80/index.html?name=andy&age=1#link http：通信协议 www.itcast.cn：域名80：端口 index.html：路径?name=andy&age=1：参数 #link 片段：锚点、链接
对象属性：
对象方法：
navigator：封装浏览器配置信息的对象
window.history 对象包括浏览器的历史（url）集合
window.screen 对象包含有关用户的信息
// screen:获得显示设备的分辨率大小 // 完整的分辨率:screen.widht/height // 如何鉴别客户端的种类 兼容所有的客户端 宽度 // 大屏 中屏 小屏 超小屏 // lg md sm xs // TV pc pad phone //宽 >= 1200 >=992 >= 768 < 768 // 全掉任务栏之后剩余的分辨率 // screen.availHeight/availWidth
可以动态得到该元素的位置（偏移）、大小等
offset系列常用属性：
动态获取元素的边框大小、元素大小等
常用属性：
动态获取元素的大小、滚动距离
常用属性
滚动条在滚动的时候会触发onscroll事件
window.pageXOffset/pageYOffset IE8 及IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop兼容性比较混乱，用时取两个值相加，因为不可能存在两个值同时有值 封装兼容性方法，求滚动条滚轮滚动距离getScrollOffet()
/*
封装一个获取滚动条的滚动距离
返回：x:水平滚动条滚动的距离 y:垂直滚动条滚动的距离
*/function getScrollOffet(){
if(window.pageXOffset){
return {//对象的{}一定要在关键字后，否则系统会自动加上; 则返回值会是undefined
x : window.pageXOffset,
y : window.pageYOffset }
}else{//兼容IE8以及以下
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop }
}}window.innerWidth/innerHeightIE8及IE8以下不兼容(注意：这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度) document.documentElement.clientWidth/clientHeight标准模式下，任意浏览器都兼容 document.body.clientWidth/clientHeight适用于怪异某事下的浏览器 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()
/*封装返回浏览器视口尺寸
返回值：
w ：视口的宽度
h : 视口的高度
*/function getViewportOffset(){
if(window.innerWidth){
return {
w : window.innerWidth,
h : window.innerHeight }
}else{ //兼容IE8以及以下的浏览器
if(document.compatMode == 'BackCompat'){
//怪异渲染模式下
return {
w : document.body.clientWidth,
h : document.body.clientHeight }
}else{
// 标准模式
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight }
}
}}console.log(document.compatMode);// BackCompat 怪异模式// CSS1Compat 标准模式domElement.getBoundingClientRect() 兼容性很好；返回一个对象，该对象中有left、top、right、bottom等属性，left、top代表元素左上角的X和Y坐标， right和bottom表示元素右下角的X和Y坐标height 和 width属性老版本IE未实现 返回的结果并不是’实时的’
// 获取元素在文档中的位置function getElementPosition(target){
// 支持 BoundingClientRect()方法
if(0 && target.getBoundingClientRect){
var pos = target.getBoundingClientRect();
return { // 涉及到滚动条有移动的情况下 加上滚动条的位置
x : pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft),
y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop)
}
} else {
var pos = {
left : 0,
top : 0
}
var _elm = target;
while(target.offsetParent){
if(_elm == target){//首次累加left 和 top
pos.left += target.offsetLeft;
pos.top += target.offsetTop;
}else{
pos.left += target.offsetLeft + target.clientLeft;
pos.top += target.offsetTop + target.clientTop;
}
// target 重新赋值
target = target.offsetParent;
}
return { x : pos.left, y : pos.top}
}}状态栏
窗口位置
其他属性
【相关推荐：javascript视频教程、web前端】
以上就是整理总结JavaScript常见的BOM操作的详细内容，更多请关注php中文网其它相关文章！
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
777
