获取窗口属性

ゝ一世哀愁。 2023-03-12 12:19 9阅读 0赞

## ##

### 常识： ###

**屏幕滚动的高度为：**滚动条滚动距离 + 首屏高度

### 滚动条滚动距离：**scrollTop** ###

以下2个都是求滚动条滚动距离，在IE浏览器中，由于兼容性问题，一个如果有值，那么另一个一定为0，

**所以兼容写法： document.body.scrollTop + document.documentElement.scrollTop**

1、document.body.scrollTop

2、document.documentElement.scrollTop

### 可视区窗口的宽度 ###

**1、 **IE8 及以下 不兼容

**window.innerWidth**

**window.innerHeight**

**2、 ****标准模式**下任意模式都兼容

**document.documentElement.clientWidth**

**document.documentElement.clientHeight**

**3、**适用于**怪异模式**下的浏览器 （浏览器选渲染不是正常的渲染，而是回退到历史版本，兼容之前的语法）

**document.body.clientWidth**

**document.body.clientHeight   **

**封装 获取可视区窗口**

function getViewportOffset() {
        if (window.innerWidth) {
            return {
                w: window.innerWidth,
                h: window.innerHeight
            }
        } else {
            // 标准模式
            if (document.compatMode === 'CSS1Compat') {
                return {
                    w: document.documentElement.clientWidth,
                    h: document.documentElement.clientHeight
                }
            } else if (document.compatMode === 'BackCompat'){
                // 怪异模式
                return {
                    w: document.body.clientWidth,
                    h: document.body.clientHeight
                }
            }
        }
    }

### 查看元素的几何尺寸：offsetWidth ###

**1、offsetWidth、offsetHeight**  获取的是视觉的宽高（就是包含pandding）

<div style="background: brown; height: 100px; width: 100px;padding: 100px;"></div>
    <script>
    let div = document.getElementsByTagName('div')[0]
    console.log(div.offsetWidth, div.offsetHeight)
    </script>

![20200508214119668.png][]

## ##

### 查看元素的位置：offsetLeft、offsetTop ###

**如果该元素的父级元素有定位，返回的是相对于父级定位元素的距离** ( 只要父级有定位，那么输出的一定是相对于父级的距离 )**；**

**如果父级无定位，返回的是相对于文档的距离。**

<div style="border: 1px solid #000; 
                height: 200px; width: 200px;
                position: relative; left: 100px; top: 100px;">
        <div style="background: brown; 
                    width: 50px; height: 50px; 
                    position: absolute; margin-left: 50px; margin-top: 50px;">
        </div>
    </div>
    <script>
    let div = document.getElementsByTagName('div')[1]
    console.log(div.offsetLeft, div.offsetTop)
    </script>

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][] ###

### **补充：** ###

**margin塌陷：** 意思是父子同时设置margin-top时，margin-top大的有效。

**解决**：给外层父级加上border。

以下margin-top相等了，最后结果叠加了，所以 **margin-top **最终为 **100px**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1][]

**offsetLeft :** 108 原因：body 里边默认有一个8px的宽度

**offsetTop :** 100 原因：margin塌陷的时候，已经把8px包含进去了。

![20200509100043407.png][]

### 滚动条滚动 ###

**window.scroll( x, y ) 、window.scrollTo( x, y )   **让滚动条滚动到xxx位置 （不可叠加）

window.scrollTo(0, 200)

**window.scrollBy( x, y ) ** 让滚动条移动至xxx位置 （可叠加）

window.scrollBy(x, y)

### ** ** ###

### **小例子：点击按钮滚动条移动** ###

let flag = true
    let timer = null
    div.onclick = function () {
        if (flag) {
            timer = setInterval(() => {
                window.scrollBy(0, 10)
            }, 100)
            flag = false
        }
    }
    div.onclick = function () {
        clearTimeout(timer)
        flag = true
    }

[20200508214119668.png]: /images/20230312/99a47005386e420a9843a401b97078f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: /images/20230312/ed15b7e4f6ae411b8c192ecb3508f731.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70 1]: /images/20230312/b989eb8187bc45808a2666e5ed8521de.png
[20200509100043407.png]: /images/20230312/1d7bc287d7844d15bb9ed279bcc8eeac.png