通过Javascript添加@media规则

Question

我使用JavaScript添加动态创建的图像，但是当视口为600px或更宽时，我需要删除此对象。

以下是我尝试的内容：

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/

Answer 2

或者只是检测窗口宽度而不在javascript中写入任何媒体：

if (window.innerWidth < 600) {
// do something
}

或jquery：

if($(window).width() < 600){
// do something
}

如果您想查看实时结果，还需要创建一个函数并在resize函数上执行此操作。