监视DOM的魔咒

2024-01-09 18:29:36

有些人对看不见的代码感到好奇，无论出于什么原因，他们喜欢在页面上检查元素的属性。

如果是这样，请准备一个秘密的魔法口诀，可以让你的浏览器变成 DOM 检查器的工具。

如何使用这个 DOM 检查器

只需将下面的代码块复制到浏览器控制台，并将鼠标悬停在您喜欢的任何页面元素上，就会出现一个漂亮的小工具提示，其中包含有关该元素的所有信息：

(function () {
  const observer = new MutationObserver(mutations => {
    const target = mutations[0].target;
    const style = window.getComputedStyle(target);
    const info = `
      Element: ${target.nodeName}
      Class: ${target.className}
      ID: ${target.id}
      Dimensions: ${target.offsetWidth}x${target.offsetHeight}
      Margin: ${style.marginTop} ${style.marginRight} ${style.marginBottom} ${style.marginLeft}
      Padding: ${style.paddingTop} ${style.paddingRight} ${style.paddingBottom} ${style.paddingLeft}
      Border: ${style.borderTopWidth} ${style.borderRightWidth} ${style.borderBottomWidth} ${style.borderLeftWidth}
      Font: ${style.fontSize} ${style.fontWeight} ${style.fontFamily}
      Color: ${style.color}
      Background: ${style.backgroundColor}
    `;
    console.log(info);
  });

  observer.observe(document.body, {
    attributes: true,
    childList: true,
    subtree: true,
    characterData: true
  });
})();