如何在MS Edge中使用JavaScript获取未知样式规则
我想使用object-fit CSS规则。
MSIE和MS Edge浏览器不支持此功能。
虽然IE有一些多边形填充，但据我所知，没有一个可以在Edge中工作。
例如，Jonathan Neal的polyfill fitie可以在IE上运行，但不能在Edge上运行(至少在我的机器上不能)。这是因为fitie使用了element.currentStyle和element.runtimeStyle，这两个JS对象只有MS，在Edge浏览器中不再支持。但是如果我使用window.getComputedStyle(element).getPropertyValue('object-fit')，Edge什么也不会返回。
因此，如何在MS Edge browser中使用JavaScript获取object-fit 规则的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>
编辑
这肯定是可能的，因为它并没有被完全忽略。
开发人员工具显示卷曲带下划线的规则
奖励问题：
是否有适用于边缘的object-fit的多边形填充？
回答 2
Stack Overflow用户
发布于 2017-07-25 19:03:51
您应该能够直接引用它：
// '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>
该样式属性在不支持它的浏览器(如Edge)中将是undefined，即使使用polyfill也是如此。
问题是，就边缘而言:没有object-fit规则。当Edge解析CSS时，它无法识别规则，只是跳过它。如果您用其他属性或JS填充行为，这并不会改变Edge只是不知道它的事实。
因此，在回答“如何在MS Edge浏览器中使用JavaScript获取CSS规则对象匹配规则的值？”您可以执行window.getComputedStyle(ele).objectFit来获取值，并且它始终是undefined (即使成功地进行了填充)。
对于额外的问题: Edge支持background-size: cover，因此您应该能够将图像设置为display:inline-block元素的CSS背景，并获得您想要的行为。您可以相当容易地将<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-fit-images这样的填充程序更进一步，并且支持像object-position这样的附加属性。
或者(对于更多的超文本标记语言)，您可以保留<img>标记并将其包装在一个容器中，该容器的行为类似于对其应用object-fit。这就是object-fit-polyfill所做的。
两个垫片都应该在Edge中起作用。
Stack Overflow用户
发布于 2017-07-25 22:30:05
我想使用适合对象的
规则。
您不需要在MS Edge浏览器中使用JavaScript获取CSS规则object-fit规则的值，即可使img覆盖其父级。
额外的好处:不需要使用polyfill，可以在所有浏览器上运行，甚至可以在IE9上运行
附注，MS Edge版本。16支持object-fit
这里有一个使用transform: translate和min-width/height的解决方案，它与object-fit: cover完全一样。
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>
基于注释更新的
当涉及到为video模拟object-fit时，事情变得复杂得多。
video元素的响应方式与图像不同。
这里有4个不同的示例，展示了一些视频在模仿cover时工作，而另一些视频在模仿contain时工作
带有更大方形
- https://jsfiddle.net/zvtx6uy7/2/封面的video
- https://jsfiddle.net/zvtx6uy7/3/封面，带有更宽的video
- https://jsfiddle.net/zvtx6uy7/5/容器的video
- https://jsfiddle.net/zvtx6uy7/6/容器，带有更宽的
的更方形的视频容器
要获得与图像一致且同样好的效果，需要运行一个小脚本来获取视频的纵横比，然后根据其及其容器的纵横比将其宽度或高度设置为100%。
这是SO，simulate background-size:cover on or 上的另一篇文章，它展示了一些更多的方法来实现这一点。
我发现的另一个选择是使用媒体查询及其max/min-aspect-ratio
https://stackoverflow.com/questions/45051489
复制相似问题