如何使用 JavaScript 获得焦点 HTML 元素的样式？答案

【问题标题】：How do you get the style of focussed HTML element using JavaScript?如何使用 JavaScript 获得焦点 HTML 元素的样式？
【发布时间】：2020-01-27 10:33:40
【问题描述】：

我想获得一个元素被聚焦时的计算样式。我正在使用 puppeteer，我想将焦点前的 CSS 与焦点后的 CSS 进行比较。我可以使用element.focus() 成功地将焦点集中在一个元素上，并且可以通过检查活动元素（document.activeElement）来确认它是焦点。但是，该元素的计算样式 (getComputedStyle()) 与焦点之前的样式相同，这不是我的预期。

有没有办法获取焦点后元素的CSS？

明确地说，我正在编写一个 JavaScript 工具，它可以抓取任何网站以检查焦点元素的轮廓或边框是否与页面上的背景有足够的对比（这样它符合可访问性指南 https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html ）。为此，我需要能够在元素处于焦点时获得轮廓/边框的颜色。通常，焦点轮廓将在:focus { ... } 下的 CSS 中定义，所以这是我希望为任何元素检索的内容。

【问题讨论】：

据我所知，焦点更像是元素状态而不是样式。 java2s.com/Tutorials/Javascript/Javascript_Reference/…
你希望css在聚焦之后变成什么？
一种常见的情况是边框或轮廓在选定元素上变为蓝色。这是我所期望的。 @GetSet
@demkovych 有没有办法在元素处于该状态时检索元素的样式？例如处于焦点状态时，按钮的轮廓可能会变为蓝色。但是当我在那个状态下得到那个元素的计算样式时，样式并没有说轮廓是蓝色的。
您好，我在下面的回答 (stackoverflow.com/a/59944379/9060223) 有帮助吗？

标签： javascript html css focus puppeteer

【解决方案1】：

您需要注意脚本中的代码顺序。如果您在getComputedStyle() 之前更改样式，您将获得更改。

例子：

document.querySelector("input").addEventListener("focus", (e) => {
  console.log(window.getComputedStyle(e.target, null).color);
  e.target.style.color = "red";
  console.log(window.getComputedStyle(e.target, null).color);
  e.target.style.color = "blue";
})

&lt;input type="text" style="color: blue;"&gt;

【讨论】：

感谢您的回复。我认为这不会有帮助，因为我希望能够抓取任何网站以获得他们定义的焦点大纲。我已经添加到我的问题中，所以希望它更清楚我希望实现的目标。

【解决方案2】：

由于getComputedStyle 返回一个实时的CSSStyleDeclaration，您必须自己手动记录 CSS 样式以保持 CSS 在焦点之前。

这是一个工作示例：

let allInputs = document.querySelectorAll('input')
let beforeFocusStyles = Array.from(allInputs).reduce(function(final, elem) {
  final[elem.dataset.identifier] = (function() {
    let liveStyle = window.getComputedStyle(elem)
    let value = {}
    for (let key in liveStyle) {
      value[key] = liveStyle[key]
    }
    return value
  })()
  return final
}, {})

Array.from(allInputs).forEach(elem => {
  elem.onfocus = function() {
    let afterFocusStyle = window.getComputedStyle(elem)
    let differenceInStyle = (function() {
      let beforeFocusStyle = beforeFocusStyles[elem.dataset.identifier]
      let differences = []
      for (let key in afterFocusStyle) {
        if (beforeFocusStyle[key] !== afterFocusStyle[key]) {
          differences.push([key, beforeFocusStyle[key], afterFocusStyle[key]])
        }
      }
      return differences
    })()

    differenceInStyle.forEach(difference => {
      console.log(difference[0], difference[1], difference[2])
    })
  }
})

.type1 {
  outline: 1px solid black;
  border: none;
}

.type1:focus {
  outline: 2px solid red;
  border: none;
}

.type2 {
  outline: 1px solid blue;
  border: none;
}

.type2:focus {
  outline: 2px solid green;
  border: none;
}

<input type="text" class="type1" data-identifier="1">
<input type="text" class="type2" data-identifier="2">

【讨论】：