javascript - 通过 Javascript 添加 @media 规则

Question

我正在使用 JavaScript 添加一个动态创建的图像，但我需要在视口(viewport)为 600 像素或更宽时删除该对象。

这是我尝试过的:

var img = document.createElement('img');
// (imagine here all the others fields being defined).
img.style='My @media Rule here';

然而，它并没有起作用。是否可以按照我尝试做的方式来做这件事？

Answer 1

只需创建 CSS 类并在动态添加图像时应用它:

JavaScript:

var img = document.createElement('img');
img.className = "imageClass";
img.src = "image/src/image.jpg";

和样式表:

@media screen and (min-width: 600px) {
    .imageClass {
        display: none;
    }
}

示例:https://jsfiddle.net/cr29y1tc/1/