JS笔记

## 简介

> 本文用于记录一些`js`代码，包括函数、语法等等。
> 
> 目前包括：获取浏览器/系统参数 | 页面加载后自动执行 | 禁止div显示 | 设置滚动条固定在底部
> 
> 持续更新中。。。

<!-- more -->

## 获取浏览器/系统参数

```javascript
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth (包括边线和滚动条的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)

网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft

网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

你的屏幕设置是：window.screen.colorDepth 位彩色
你的屏幕设置：window.screen.deviceXDPI 像素/英寸
```

## 页面加载后自动执行

```javascript
    window.onload = function () {
        console.log("auto run")
    }
```

## 禁止div显示

1. 利用css的display属性

```js
var doc = document.getElementById('test'); //选取id为test的div元素

doc.style.display = 'none'; // 隐藏元素

doc.style.display = 'block'; // 显示元素
```

2. 利用css的visibility属性

```js
var doc = document.getElementById('test'); //选取id为test的div元素

doc.style.visibility = 'hidden'; // 隐藏元素

doc.style.visibility = 'visible'; // 显示元素
```

## 设置滚动条固定在底部

```js
var div = document.getElementById("div");
// 当一个div有滚动条时
// scrollHeight为其div真实高度
// scrollTop为已向下滚动的距离
// clientHeight为div可见区域的高度(一般是固定高度)
div.scrollTop=div.scrollHeight;
```

## 观察器

使用观察器（MutationObserver）可以监听页面元素变化，详情可参考：[MutationObserver](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver)

```js
/**
 * 监听body变化
 */
function listener_body() {

    // 选择要观察的目标节点
    const body = document.body;

    // 观察器的配置（需要观察什么变动）
    var config = { childList: true };

    // 当观察到变动时执行的回调函数
    var callback = function (mutationsList, observer) {
        console.log("body发生变化");
    };

    // 创建一个观察器实例并传入回调函数
    var observer = new MutationObserver(callback);

    // 用配置文件初始化观察器实例
    observer.observe(body, config);
}
```