Как получить правило неизвестного стиля в MS Edge с JavaScript

Я хочу использовать правило CSS object-fit.
Это не поддерживается в MSIE и MS Edge Browser.
Хотя для IE есть несколько полисов, я не знаю, что работает в Edge.

например. polyfill fitie Джонатана Нила работает с IE, но не в Edge (по крайней мере, не на моей машине). Это связано с тем, что fiie использует element.currentStyle и element.runtimeStyle, которые являются только MS-объектами JS, которые больше не поддерживаются в Edge-браузерах. Но если я использую window.getComputedStyle(element).getPropertyValue('object-fit'), Edge ничего не возвращает.

Итак, как мне получить правило правила CSS object-fit с JavaScript в браузере MS Edge?

img = document.getElementById('i');
s = self.getComputedStyle(img);
console.log('object-fit: ', s.getPropertyValue('object-fit'));
console.log('-ms-object-fit: ', s.getPropertyValue('-ms-object-fit'));

div {
  width: 400px;
  height: 320px;
  overflow: hidden;
}
#i {
  display: block;
  width: 100%;
  height: 100%;
  -ms-object-fit: cover;
  object-fit: cover;
}

div {
  box-sizing: border-box;
  border: 1px solid gold;
}
div,
p {
  font-family: sans-serif;
  font-size: 20px;
  width: 400px;
  margin: 0 auto;
}

<p>img: Has object-fit CSS rule, but does not appear in MS Edge JavaScript log</p>
<div>
<img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>

Ответ 1

Вы должны иметь возможность ссылаться на него напрямую:

// 'Fill' in Chrome and undefined in Edge
console.log('object-fit',  
    window.getComputedStyle(document.querySelector('.test')).objectFit);

// 'rgb(255,0,0)' in both
console.log('color', 
    window.getComputedStyle(document.querySelector('.test')).color);

.test{ color: red; }

<div class="test">test</div>

Ответ 2

Я хочу использовать правило CSS с привязкой к объекту.

Вам не нужно получать значение правила правила CSS object-fit с JavaScript в браузере MS Edge, чтобы сделать img закрытым родителем.

Бонус: не нужно использовать polyfill и работает во всех браузерах до IE9

Боковое примечание, MS Edge ver. 16 поддерживает object-fit

Вот решение, которое работает точно как object-fit: cover, используя transform: translate и min-width/height.

div {
  width: 400px;
  height: 320px;
  box-sizing: border-box;
  border: 1px solid gold;
  margin: 0 auto;
  overflow: hidden;
}

#i {
  position: relative;
  display: block;
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<div>
  <img src="https://dummyimage.com/640x240/333/444.png" id="i" />
</div>