18-第十八章 、CSSOM视图模式(CSS Object Model View)

文档及其内容的视觉属性，包括布局框定位、视区宽度和元素滚动

一、Window 视图属性

1、innerWidth / innerHeight

• 窗口的内部宽度， 不包括用户界面元素，比如窗框 （浏览器窗口可视区宽度）
  window.innerWidth
• 内部高度（浏览器窗口可视区高度）
  window.innerHeight

二 、Document 文档视图

1、document.documentElement.clientWidth

• 浏览器窗口可视宽度 （文档可视区宽度）
  document.documentElement.clientWidth
• 浏览器窗口可视高度 可获取文档没有内容时候高度 （文档可视区高度）
  document.documentElement.clientHeight

没有定义 W3C 的标准，则 IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

三、元素视图属性

1、offsetWidth / offsetHeight 可视宽高

• offsetWidth: 对象的 width + padding +border
• offsetHeight: 对象的 height + padding + border
  不包含子元素（一致）

2、clientWidth / clientHeight可视宽高

• clientWidth 对象的 width + padding
• clientHeight 对象的 height + padding
  不包含子元素（一致）

3、scrollWidth / scrollHeight 可视宽高

scrollWidth / scrollHeight 等于实际的 width / height + padding 不包括 border

• scrollWidth 等价于 对象 的 width + padding
• scrollHeight 应该等价于 scrollTop + clientHeight
• 如果元素没有隐藏的部分，则相关的值应该等价于 clientWidth 和clientHeight
• 包含子元素内容,子元素定位,overflow:hidden（一致）

4、offsetParent 定位父级

获取元素最近的定位父级 如果没有定位父级 则参考 body（ 元素必须是定位元素）

5、offsetTop / offsetLeft

offsetLeft 获取当前元素到定位父节点的 top 方向的距离
获取对象相对于 offsetParent(left) 位置

offsetTop 获取当前元素到定位父节点的 left 方向的距离

获取对象相对于 offsetParent(top) 位置

只到 padding，不包括 border

        var iTop = 0;
        var obj = oDiv3;
        while (obj) {
            iTop += obj.offsetTop;
            obj = obj.offsetParent;
        }

6、scrollTop / scrollLeft 滚动宽,滚动高

可读可写，有内容溢出元素才有效果
ele.scrollTop 元素 Y 轴滚动的距离
ele.scrollLeft 元素 X 轴滚动的距离

HTML

    

        1234545467872345454678789798
    

CSS

            overflow-x: auto;
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background: red;
        }

image.png

code

设置时不能给 px 单位，否则会出错！！！！！！！！

document.getElementsByTagName("body")[0].scrollTop = 100;
document.body.scrollTop / scrollLeft

网页被滚动的高度： document.body.scrollTop
网页被滚动的宽度： document.body.scrollLeft

！！！IE,firfox ：document.documentElement.scrollTop

        var box = document.getElementById('box');
        var num = 0;
        function fn() {
            //num++;
            box.scrollTop = ++num;
            document.title = box.scrollTop;
            requestAnimationFrame(fn);
        }
        fn();

返回文档的滚动 top 方向和 left 方向的距离（重点记忆）
document.documentElement.scrollTop
document.documentElement.scrollLeft

document.body.scrollTop 与 document.documentElement.scrollTop 两者有个特点，
就是同时只会有一个值生效。
比如 document.body.scrollTop 能取到值的时候，document.documentElement.scrollTop就会始终为 0；
反之亦然

兼容写法

  var heightTop = document.documentElement.scrollTop || document.body.scrollTop;

各浏览器下 scrollTop的差异:

IE6/7/8：

可以使用 document.documentElement.scrollTop；

IE9及以上：

可以使用 window.pageYOffset 或者document.documentElement.scrollTop

Safari:

window.pageYOffset 与 document.body.scrollTop 都可以；

Firefox:

火狐等等相对标准些的浏览器就省心多了，直接用 window.pageYOffset或者 document.documentElement.scrollTop ；

Chrome：

谷歌浏览器只认识 document.body.scrollTop;

四、元素方法

1、ele.getBoundingClientRect(): /baʊnd/ 界限

ele.getBoundingClientRect() 得到矩形元素的界线，返回的是一个对象，包含 top, left, right, bottom 四个属性值，大小都是相对于浏览器窗口top,left的距离。
返回内容类似于：
{ top: 143, right: 1196, bottom: 164, left: 889}

2、scrollIntoView():

ele.scrollIntoView() 让元素滚动到可视区域（HTML5标准),参数 true 与浏览器对齐，false 元素在窗口居中显示

3、event.clientX / event.clientY

相对于window，为鼠标相对于浏览器窗口的偏移
event.clientX 鼠标在文档的水平座标
event.clientY 鼠标在文档的垂直座标