第八章 BOM

web小张
90 阅读5分钟

区域的尺寸和位置

获取和设置滚动的位置

image.png

获取滚动位置：

  • dom元素：dom.scrollTop和dom.scrollLeft

  • 页面区域：document.documentElement.scrollTop|scrollLeft或document.body.scrollTop|scrollLeft

    一部分浏览器支持前者且后者得到0，另外一部分浏览器支持后者且前者得到0，因此可以使用兼容性写法：

    var pageScroll = {
    scrollTop: document.documentElement.scrollTop + document.body.scrollTop,
    scrollLeft: document.documentElement.scrollLeft + document.body.scrollLeft,
}

设置滚动位置：修改相应区域的scrollTop和scrollLeft属性的值即可设置滚动的位置

获取外界的尺寸

获取屏幕的宽度和高度：window.screen.width、window.screen.height

获取浏览器窗口的宽度和高度：window.outerWidth、window.outerHeight

获取视口的宽度和高度：window.innerWidth、window.innerHeight

获取视口的宽度和高度，但不包含滚动条本身所占空间：document.documentElement.clientWidth、document.documentElement.clientHeight

尺寸1.png

注意：

  • css中的尺寸单位90vw等同于window.innerWidth * 0.9个px的效果，90vh等同于window.innerHeight * 0.9个px的效果

  • 给html元素或body元素设置滚动条，其实是在给视口设置滚动条，会导致document.documentElement.clientWidth|clientHeight发生变化，而其它元素则不是

    <!DOCTYPE html>
<style>
  body {
    margin: 0;
    /* overflow: scroll; */
  }
</style>

<script>
  console.log(document.documentElement.clientWidth);
</script>

    <!DOCTYPE html>
<style>
    body{
        margin: 0;
    }
    
    #div{
        width: 100vw;
        height: 100vh;
        /* overflow: scroll; */
    }
</style>

<div id="div"></div>

<script>
	console.log(document.documentElement.clientWidth);
</script>

  • 当文档中的内容在显示时超出了视口的尺寸，浏览器会自动给视口添加滚动条

  • html元素的自动宽度为document.documentElement.clientWidth，但html元素的自动高度却不是document.documentElement.clientHeight

扩展：

document.documentElement.clientWidth|clientHeight的值所代表的含义是受文档声明影响的，在有文档声明的情况下，它代表不考虑滚动条区域的视口的尺寸；在没有文档声明的情况下，则它等于html元素的填充盒尺寸

<!-- <!DOCTYPE html> -->
<html>
    <style>
        html{
            width: 10px;
            height: 10px;
            padding: 30px;
            border: 10px solid;
            margin: 20px;
            /* overflow: scroll; */
        }
    </style>
    <script>
    	console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
    </script>
</html>

获取元素的尺寸

包含滚动条本身所占区域，包含边框区域，不包含元素的溢出区域：dom.offsetWidth、dom.offsetHeight

不包含滚动条本身所占空间，不包含边框区域，不包含元素的溢出区域：dom.clientWidth、dom.clientHeight

尺寸2.png

不包含滚动条本身所占空间，不包含边框区域，包含元素的溢出区域：dom.scrollWidth、dom.scrollHeight

当元素没有溢出区域时，dom.scrollWidth、dom.scrollHeight等效于dom.clientWidth和dom.clientHeight

尺寸3.png

补充

  • dom.offsetParent

    获取dom元素的第一个定位的祖先元素（不管dom是否是定位元素），找到body时就停止，此时将直接返回body

    对于body.offsetParent，始终返回null

  • dom.offsetLeft、dom.offsetTop

    若dom.offsetParent不是body，则返回dom的边框盒左上角相对于dom.offsetParent的填充盒左上角的距离

    若dom.offsetParent是body，但body是定位元素，则返回dom的边框盒左上角相对于body的边框盒左上角的距离

    若dom.offsetParent是body，但且body不是定位元素，则返回dom的边框盒左上角相对于页面左上角的距离

    对于body的offsetLeft和offsetTop，始终返回0

  • dom.getBoundingClientRect()

    该方法会返回一个对象，对象中记录了dom的尺寸以及dom相对于视口左上角的距离

    width、height：dom的边框盒的宽高

    left、x：dom的边框盒的左端距离视口左端的距离

    top、y：dom的边框盒的上端距离视口上端的距离

    right：dom的边框盒的右端距离视口左端的距离

    bottom：dom的边框盒的下端距离视口上端的距离

    尺寸5.png

    注意：该方法返回的对象不是实时的，并且该方法会将元素的滚动条所在空间计算在内

  • window.scrollX、window.pageXoffset相等于根元素的scrollLeft

    window.scrollY、window.pageYoffset相等于根元素的scrollTop

  • window|dom.scrollTo(x, y)

    设置滚动位置，直接滚动到(x, y)位置

  • window|dom.scrollBy(x, y)

    设置滚动位置，在原来位置的基础上增加x、y的滚动距离

  • window.resizeTo(width, height)

    设置窗口尺寸，直接将窗口尺寸设置为width、height

    该方法只能设置用JS创建出的新窗口，用户打开的窗口无法设置

  • window.resizeBy(width, height)

    设置窗口尺寸，在原窗口尺寸的基础上增加width、height的尺寸

    该方法只能设置用JS创建出的新窗口，用户打开的窗口无法设置

注意：上面所有获取元素尺寸和位置的方式，都将导致页面重排

计时器

  • window.setTimeOut(fn, duration)
  • window.setInterval(fn, duration)

计时器函数会返回一个数字，表示计时器的编号，在清除定时器时就需要用到该编号

  • window.clearTimeOut(id)
  • window.clearInterval(id)

注意：清除计时器后，正在等待时间到达的回调函数也将停止等待并取消执行，即不可能出现清除定时器后还多执行一次回调函数的情况

使用timeout实现interval：

var timer;

function deleteInterval(timer){
       clearTimeout(timer);
}

function createInterval(callback, duration){
       timer = setTimeout(function(){
           callback();
         createInterval(callback, duration);       
       }, duration);
}

createInterval(function(){
       console.log("interval");
}, 1000);

// 一段时间后
deleteInterval(timer);

虽然上面的模式像是递归，但实际上不是递归，原因是计时器内的回调函数是异步执行的，计时器后面的代码并不会等到计时器中的回调函数运行后才去运行。当定时器中的回调函数执行时，外层函数早已执行完成，并从函数调用栈中退出了

window对象

  • open("页面路径", target, "其它配置")

    打开一个新窗口

    target等同于a元素的target

    该函数会返回一个新的window对象

  • alert()

    弹出框

  • confirm()

    确认框

  • prompt()

    提示框

对象成员

  • document

  • location

    地址栏对象

    属性描述
    hash返回URL的锚部分
    host返回URL的主机名和端口号
    hostname返回URL的主机名
    href返回完整的URL
    pathname返回URL的路径
    port返回URL的端口号
    protocol返回URL的协议
    search返回URL的query

    以上所有属性都可以更改，更改的值将会应用到浏览器中

    方法描述
    reload()刷新当前页面

  • navigator

    不要用

  • history

    方法描述
    forword()前进一个页面
    back()后退一个页面
    go(n)前进n个页面

  • console

    成员描述
    log(param)打印param的valueOf方法的返回值
    dir(param)打印param的对象结构
    time()开启记时，与timeEnd()配合使用
    timeEnd()结束并打印记时时长，与time()配合使用
avatar
文章
阅读
粉丝