window.getComputedStyle возвращает значение с типом CSSStyleDeclaration, которое имеет CSS ключей свойств в формате Camelcase.
Однако, протестировано как на Chrome, Firefox, так и в Safari, оно возвращает значения ключей указаны как в верблюжьем регистре, так и в формате, разделенном дефисом, и я ссылаюсь на ключи в формате, разделенном дефисом:
const div = document.querySelector('div#test');
const computedStyles = window.getComputedStyle(div);
console.log(
'marginTop:', computedStyles.marginTop,
'margin-top:', computedStyles['margin-top']
);
div#test {
width: 100px;
height: 100px;
background-color: aqua;
margin-top: 50px;
}
<div id='test'></div>
Это заставляет меня использовать много уродливых as unknown as ... при попытке получить значение, ссылающееся на ключ (например, второй случай в приведенный выше пример), поэтому я решил добавить дополнительные свойства к CSSStyleDeclaration. Я просто не уверен, как это сделать.
И просто для ясности: проблема в том, что на CSSStyleDeclaration (возвращаемый тип window.getComputedStyle) margin-top свойство не существуют, но возвращаемое значение действительно имеет его.
Стоит упомянуть, что я не хотел бы создавать новые, настраиваемые типы. По сути, я просто хотел бы расширить уже существующий тип, поэтому CSSStyleDeclaration локально будет иметь ключи, уже существующие на нем, плюс мои собственные (margin-top на основе примера).