• 视窗大小属性总结


    偏移量(offset dimension)

    包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小(注意,不包括外边距)
     offsetHeight:元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。
     offsetWidth:元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。
     offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。
     offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。
     
    其中, offsetLeft 和 offsetTop 属性与包含元素有关,包含元素的引用保存在 offsetParent属性中。 offsetParent 属性不一定与 parentNode 的值相等。
    function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
    actualLeft += current.offsetLeft;
    current = current.offsetParent;
    }
    return actualLeft;
    }
    function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
    actualTop += current. offsetTop;
    current = current.offsetParent;
    }
    return actualTop;
    }
    所有这些偏移量属性都是只读的,而且每次访问它们都需要重新计算。因此,应该尽量避免重复访问这些属性;如果需要重复使用其中某些属性的值,可以将它们保存在局部变量中,以提高性能
     

    clientHeight和clientWidth

    客户区大小就是元素内部的空间大小

    包含滚动内容的元素的大小

    有些元素(例如<html>元素),即使没有执行任何代码也能自动地添加滚动条;但另外一些元素,则需要通过 CSS 的overflow 属性进行设置才能滚动。以下是 4 个与滚动大小相关的属性。
     scrollHeight:在没有滚动条的情况下,元素内容的总高度。
     scrollWidth:在没有滚动条的情况下,元素内容的总宽度。
     scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
     scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
     
    通常认为<html>元素是在 Web 浏览器的视口中滚动的元素(IE6 之前版本运行在混杂模式下时是<body>元素)。因此,带有垂直滚动条的页面总高度就是 document.documentElement.scrollHeight。
     
    Firefox 中这两组属性始终都是相等的,但大小代表的是文档内容区域的实际尺寸,而非视口的尺寸。
    Opera、 Safari 3.1 及更高版本、 Chrome 中的这两组属性是有差别的,其中 scrollWidth 和scrollHeight 等于视口大小,而 clientWidth 和 clientHeight 等于文档内容区域的大小。
     IE(在标准模式)中的这两组属性不相等,其中 scrollWidth 和 scrollHeight 等于文档内容区域的大小,而 clientWidth 和 clientHeight 等于视口大小。
     
     在确定文档的总高度时(包括基于视口的最小高度时),必须取得 scrollWidth/clientWidth 和scrollHeight/clientHeight 中的最大值,才能保证在跨浏览器的环境下得到精确的结果。
    下面就是这样一个例子。
    var docHeight = Math.max(document.documentElement.scrollHeight,
    document.documentElement.clientHeight);
    var docWidth = Math.max(document.documentElement.scrollWidth,
    document.documentElement.clientWidth);
    注意,对于运行在混杂模式下的 IE,则需要用 document.body 代替 document.documentElement。
     
    通过 scrollLeft 和 scrollTop 属性既可以确定元素当前滚动的状态,也可以设置元素的滚动位置。在元素尚未被滚动时,这两个属性的值都等于 0。如果元素被垂直滚动了,那么 scrollTop 的值会大于 0,且表示元素上方不可见内容的像素高度。如果元素被水平滚动了,那么 scrollLeft 的值会大于 0,且表示元素左侧不可见内容的像素宽度。这两个属性都是可以设置的,因此将元素的scrollLeft 和 scrollTop 设置为 0,就可以重置元素的滚动位置。

  • 相关阅读:
    CCF 小明放学 201812-2(简单模拟)
    CSP 小明上学 201812-1 (水题)
    201903-4 消息传递接口(队列模拟)
    Betsy's Tour 漫游小镇(dfs)
    Checker Challenge跳棋的挑战(n皇后问题)
    Money Systems 货币系统(母函数)
    中国剩余定理(模板+详解)
    Biorhythms(中国剩余定理(模板题))
    输入输出外挂(纯数字型)
    欧几里德(转)
  • 原文地址:https://www.cnblogs.com/yaoyao-sun/p/10388410.html
Copyright © 2020-2023  润新知