2023-02-27
温故知新
00
请注意,本文编写于 590 天前,最后修改于 127 天前,其中某些信息可能已经过时。

目录

简介
获取浏览器/系统参数
页面加载后自动执行
禁止div显示
设置滚动条固定在底部
观察器

简介

本文用于记录一些js代码,包括函数、语法等等。

目前包括:获取浏览器/系统参数 | 页面加载后自动执行 | 禁止div显示 | 设置滚动条固定在底部

持续更新中。。。

获取浏览器/系统参数

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'; // 显示元素
  1. 利用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

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); }
如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!