2021-06-22

最新推荐文章于 2021-07-22 23:53:55 发布

buty_nice

最新推荐文章于 2021-07-22 23:53:55 发布

阅读量59

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/buty_nice/article/details/118113019

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

BOM对象

BOM（Browser Object Model）浏览器对象模型

window对象属性

window.screen 屏幕相关信息

screen.availWidth 屏幕可用宽度
screen.availHeight 屏幕可用高度

history 历史记录

history.back() 加载历史记录列表中上一个url
history.forward() 加载历史记录列表中下一个url
history.go(number) 加载历史记录列表中某个具体url
number>1 前进number个页面
number<1 后退number个页面

location

location.href 获取或设置当前页面的url
location.pathname 返回当前页面的路径名
location.reload() 刷新本页面

navigator

navigator.userAgent 返回浏览器用户代理

window对象方法

alert() 警告框
confirm() 确认对话框
prompt() 提示输入对话框
setInterval()
clearInterval()
setTimeout()
clearTimeout()
open(url,"_blank",“width=400,height=400,left=20,top=10”) 打开窗口
close() 窗口关闭

window对象事件

window.onload 加载事件
当html文档加载完毕（包括图片等下载完毕），触发onload

window.onresize 窗口大小改变事件

window.onscroll 滚动条滚动事件浏览器滚动条滚动是触发

滚动条距离

dom对象.scrollTop   返回垂直方向滚动条滚动的距离

dom对象.scrollLeft 返回水平方向滚动条滚动的距离

document.documentElement.scrollTop 返回浏览器垂直方向滚动条滚动距离
document.documentElement.scrollLeft 返回浏览器水平方向滚动条滚动距离

Exp:

<style>
    .box{
      overflow: scroll;
      width: 100px;
      height: 100px;
      background-color: #ccc;
    }
  </style>

<body>
  <div class="box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam alias illo aperiam nemo illum aut optio nam adipisci odit laboriosam qui consequatur dolore cumque quos laborum repudiandae, iure tempore exercitationem.
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam alias illo aperiam nemo illum aut optio nam adipisci odit laboriosam qui consequatur dolore cumque quos laborum repudiandae, iure tempore exercitationem.
  </div>
</body>

<script>
  var divs = document.getElementsByClassName("box");
  // console.log(divs[0])
  divs[0].onscroll = function(){
    // console.log(divs[0].scrollTop);//垂直方向
    console.log(divs[0].scrollLeft)
  }
  // document  文档
  // get  获取
  // Elements  元素
  // By  通过
  // ClassName  类名
</script

buty_nice

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-22

BOM对象BOM（Browser Object Model）浏览器对象模型window对象属性window.screen 屏幕相关信息screen.availWidth 屏幕可用宽度screen.availHeight 屏幕可用高度history 历史记录history.back() 加载历史记录列表中上一个urlhistory.forward() 加载历史记录列表中下一个urlhistory.go(number) 加载历史记录列表中某个具体urlnumber>1
复制链接

扫一扫