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中：あなたはあなたがしたい場合は、関数を作成し、resize機能でこれを行う必要も

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

ライブ結果を参照してください。