Как вы получаете стиль элемента с фокусировкой HTML, используя JavaScript?

Question

Я хотел бы получить вычисленный стиль элемента, когда он сфокусирован. Я использую кукловод, и я хотел бы сравнить CSS до фокуса с CSS после фокуса. Я могу успешно сфокусироваться на элементе, используя element.focus(), и могу подтвердить, что он сфокусирован, проверив активный элемент (document.activeElement). Однако вычисленный стиль (getComputedStyle()) для этого элемента такой же, как и до фокуса, что я не ожидал.

Есть ли способ получить CSS элемента после фокуса?

Чтобы было ясно, я пишу инструмент JavaScript, который может очистить любой веб-сайт, чтобы проверить, достаточно ли контрастирует контур или граница элемента в фокусе с фоном на странице (так, чтобы он соответствовал доступности). руководящие принципы https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html). Для этого мне нужно иметь возможность получить цвет контура / границы, когда элемент находится в фокусе. Обычно контур фокуса определяется в CSS в :focus { ... }, так что это то, что я sh должен получить для любого элемента.

Answer 1

Поскольку 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">

Answer 2

нужно обратить внимание на порядок кода в скрипте. если вы измените стиль до 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";
})

<input type="text" style="color: blue;">