哪个元素是焦点：使用Javascript控制台

在Web开发中，了解哪个元素当前拥有焦点可以帮助我们更好的理解代码的交互逻辑并快速定位问题。在Javascript控制台中，我们可以使用以下方法来快速找到焦点元素：

方法一： document.activeElement

document.activeElement 属性返回当前活动的元素，也就是当前拥有焦点的元素。

const focusedElement = document.activeElement;
console.log(focusedElement);
// 输出： <input type="text" id="username">

方法二：获取焦点事件

通过给每个元素添加 focus 事件监听器，我们可以在元素获得焦点时设置其样式，以此来判断哪个元素被聚焦。

document.addEventListener('focusin', (event) => {
  const focusedElement = event.target;
  console.log(focusedElement);
  // 输出：<input type="text" id="password">
});

方法三：使用 :focus伪类查看样式

我们可以使用CSS的 :focus 伪类来查看当前焦点元素的样式并定位问题元素。

首先在控制台中通过 CSS 选择器获取目标焦点元素，然后使用 getComputedStyle 函数获取该元素的计算样式属性。

// 选择目标元素
const focusedElement = document.querySelector('#username');
// 获取计算样式
const computedStyle = getComputedStyle(focusedElement);
console.log(computedStyle);
// 输出：CSSStyleDeclaration {0: "background-color", 1: "color", ...}

通过以上方法，我们可以快速找到当前拥有焦点的元素并调试相关问题。