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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (54)

我想使用object-fitCSS规则。 这在MSIE和MS Edge浏览器中不受支持。 虽然IE有一些polyfills,但我的知识并没有在Edge中有效。

例如Jonathan Neal 的polyfill fitie可以在IE中使用,但不能在Edge中使用(至少不是在我的机器上)。这是因为fitie使用element.currentStyleelement.runtimeStyle它们是MS仅不要在边浏览器的任何支持了JS对象。但是如果我使用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>

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

提问于
用户回答回答于

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

您无需在MS Edge浏览器中使用JavaScript 获取CSS规则object-fit规则的值,从而可以将img 封面作为其父项。

奖金:无需使用polyfill,可在所有浏览器中工作到IE9

附注:MS Edge ver。16支持object-fit

这是一个完全按照和object-fit: cover使用的解决方案。transform: translatemin-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具有固定的宽度/高度设置图像的边界,这里是一个简单的例子。

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-fitvideo事情变得更加复杂。

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

以下是4个不同的示例,显示某些视频在模仿时模仿cover,有些则在模仿时模仿contain

用户回答回答于

你应该能够直接引用它:

// '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(即使成功地shimmed)。

对于奖金的问题: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相对应的行为相同。这就是物体贴合填充所做的。

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

扫码关注云+社区