JS笔记
## 简介 > 本文用于记录一些`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);
}
```END
评论
登录后查看和发表评论
前往登录