如何使用JavaScript在MS Edge中获取未知样式规则

Question

我想使用object-fitCSS规则.
MSIE和MS Edge Browser不支持此功能.
虽然IE中有一些polyfill,但据我所知,在Edge中没有.

例如Jonathan Neal 的polyfill fitie与IE合作,但不在Edge中(至少不在我的机器上).这是因为fitie使用element.currentStyle并且element.runtimeStyle只有MS的JS对象,它们不再支持Edge浏览器.但如果我使用window.getComputedStyle(element).getPropertyValue('object-fit'),Edge什么也不返回.

那么如何object-fit在MS Edge浏览器中使用JavaScript 获取CSS规则规则的值？

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>

编辑

它必须以某种方式可能,因为它没有被完全忽略.
开发人员工具显示带下划线的规则

---

奖金问题:

在Edge中是否有任何适合对象的polyfill？

Answer 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>

undefined即使使用polyfill,该样式属性也将出现在不支持它的浏览器中(如Edge).

问题是,就Edge而言:没有 object-fit规则.当Edge解析CSS时,它无法识别规则而只是跳过它.如果你用其他属性或JS来改变行为,那么不会改变Edge只是不知道它的事实.

因此,特别回答"那么如何在MS Edge浏览器中使用JavaScript获取CSS规则对象适合规则的值？" 你可以做到window.getComputedStyle(ele).objectFit这一点,它总是undefined(即使成功填充).

对于奖金的问题:background-size: cover 是由边缘支撑,所以你应该能够将图像设置为CSS背景的display:inline-block元素,并得到你想要的行为.你可以轻松换掉<img>风格的<div>...

var img = document.querySelector('.i');

// If object-fit missing
if (!window.getComputedStyle(img).objectFit) {

  // Create a div
  var div = document.createElement('div');
  div.className = img.className;

  // Set the background image to be the source
  div.style.backgroundImage = 'url(' + img.src + ')';

  // Set background-size to the object-fit we want
  div.style.backgroundSize = 'cover';

  // Swap them
  img.parentNode.replaceChild(div, img);
}

.test {
  width: 400px;
  height: 320px;
  overflow: hidden;
  border: 1px solid red;
}

.i {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

这只是一个基本的想法 - 像对象适合图像这样的垫片使这个想法更进一步,并支持其他属性,如object-position.

或者(并且使用更多HTML),您可以保留<img>标记并将其包装在容器中,该容器的行为类似于object-fit相对于它的应用.这就是object-fit-polyfill所做的.

两个垫片都应该在Edge中工作.

Answer 2

我想使用对象适合的CSS规则.

您无需在MS Edge浏览器中使用JavaScript 获取CSS规则object-fit规则的值,以便能够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>

如果需要,可以使用CSS @supports重置上述属性并添加object-fit.

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%);
}

@supports (object-fit: cover) {
  #i {
    min-width: auto;
    min-height: auto;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

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

当需要使用一个img因为想要在标记中设置图像源时,另一个被忽略的选项是使用内联样式作为background-image源.

鉴于这种情况,在这种情况下,div具有固定宽度/高度的a设置图像的边界,这里是一个简单的样本.

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

<div style="background-image: url(https://dummyimage.com/640x240/333/444.png)">
</div>

更新

你当然可以模仿object-fit: contain以及

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

#i {
  position: relative;
  display: block;
  max-width: 100%;                    /*  changed to max  */
  max-height: 100%;                   /*  changed to max  */
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

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

根据评论更新

当谈到模仿object-fit的video事情变得更加复杂.

该video元素没有以同样的方式的图像做回应.

这里有4个不同的样本,显示某些视频在模仿时有效cover,有些则在模仿时有效contain

• https://jsfiddle.net/zvtx6uy7/2/ 覆盖更方形的视频
• https://jsfiddle.net/zvtx6uy7/3/ 覆盖更广泛的视频
• https://jsfiddle.net/zvtx6uy7/5/ 包含更方形的视频
• https://jsfiddle.net/zvtx6uy7/6/ 包含更宽的视频

为了获得与图像一致且相同的良好结果,需要运行一个小脚本来获得视频宽高比,然后根据其及其容器长宽比将其宽度或高度设置为100%.

这是SO的另一篇文章,模拟背景大小:覆盖在<video>或<img>上,它展示了一些方法可以解决这个问题.

我找到的另一个选项是使用媒体查询及其 max/min-aspect-ratio

小提琴演示

Src:https://fvsch.com/code/video-background/