有用的 JavaScript 代码片段

计算鼠标相对于元素的位置。

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象。DOMRect 对象表示一个最小矩形，包含整个元素（包括其填充和边框宽度），还包含元素大小信息（例如宽度、高度以及元素相对于视口的位置）。

要计算鼠标点击事件相对于事件发生元素的位置，首先我们需要知道点击事件相对于主元素（此处指文档）的位置。e.clientX 和 e.clientY 可以帮您获取该值，它们将返回相对于主元素左上角的 x 轴和 y 轴值。其次，我们需要获取元素相对于主元素的位置，getBoundingClientRect() 方法的 left 和 top 属性可以帮助获取该值。从 clientX/clientY 值中减去 left/top 值，即可得出鼠标点击相对于元素的位置。

element.addEventListener('mousedown', function(e) {
    const target = e.target;
    const rectVal = target.getBoundingClientRect();
    const x = e.clientX - rectVal.left;
    const y = e.clientY - rectVal.top;
});

获取元素相对于文档的位置


const rect = ele.getBoundingClientRect();
// Here ScrollLeft / ScrollTop measures the width and height of the document even if some part of the document is scrolled out. 
const top = rect.top + document.body.scrollTop;
const left = rect.left + document.body.scrollLeft;

切换密码显示功能

输入类型“password”通过将每个字母替换为星号（“*”）或点（“•”）来隐藏输入的文本。如果我们将输入类型更改为文本，我们将能够看到实际的文本。此方法用于使密码文本可见，我们使用一个按钮，当点击按钮时，将检查输入字段的属性。如果是“password”，我们将其设置为“text”，密码将可见；当再次点击按钮时，我们将类型设置回密码。

html
<input type="password" classs="pass" />
<button class="tbtn">Toggle</button>

JavaScript
const passInput = document.querySelector('.pass');
const toggleBtn = document.querySelector('.tbtn');

toggleBtn.addEventListener('click', function() {
    const inputType = passInput.getAttribute('type');
    if(inputType === 'password'){
        passInput.setAttribute('type', 'text')
    else if(inputType === 'text'){
        passInput.setAttribute('type', 'password')
    }
});

滚动到页面顶部

ScrollTo(x,y) 方法使网页滚动到该方法相对于文档左上角指定的值。即 window.scrollTo(0, 0) 导致页面滚动到相对于文档左上角距左侧 0px 和距顶部 0px 的位置。

window.scrollTo(0, 0);

切换元素的可见性

我们只需将元素的 CSS display 属性设置为“none”即可从 DOM 中删除该元素。我们可以使用 JavaScript 中的条件运算符创建一个切换按钮，将显示值从“none”设置为“block”，或从“block”设置为“none”。条件运算符需要三个操作数：一个条件，后跟一个问号；一个条件为真时执行的表达式，后跟一个冒号；一个条件为假时执行的表达式。

const visibility = function(e) {
    const displayType = e.style.display;
    e.style.display = displayType === 'none' ? 'block' : 'none';
};

在浏览器中检测暗黑模式

首先，我们检测浏览器中是否存在 matchMedia 对象，如果不存在，则表示浏览器不支持暗黑模式。接下来，我们需要检查当前的配色方案，window.matchMedia('(prefers-color-scheme: dark)').matches如果启用了暗黑模式，则返回 true。

const isDarkMode = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)')
.matches;

欢迎反馈，提前感谢。

文章来源：https://dev.to/kiranrajvjd/useful-javascript-code-snippets-4lki