web-dev-qa-db-ja.com

JavaScriptまたはjQueryを使用したCSSメディアクエリの生成

JavascriptまたはjQueryを使用して、その場で完全なメディアクエリルールを作成することは可能ですか？

インラインCSS、インポート、リンクファイルを使用して、一般化されたビューポートと特定のデバイス/画面をターゲットにするために、多数のメディアクエリを使用しました。

@media screen and (min-width:400px) { ... }
@import url(foo.css) (min-width:400px);
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px)" href="foo.css" />

JQueryを使用してクラスを追加/削除できます：

$("foobar").click(function(){
  $("h1,h2,h3").addClass("blue");
  $("div").addClass("important");
  $('#snafu').removeClass('highlight');
});

私はdocument.stylesheetsと、古風でブラウザ固有のようにも見える：

  document.styleSheets[0].insertRule("p{font-size: 20px;}", 0)

しかし、プログラムで生成するための参照を見つけることができません：

  @media screen and (min-width:400px)

直接または任意の形式のJavaScriptから。

javascriptjquerycssmedia-queries
15
nickhar

既存の<style>要素（または1つ作成）textContentは、特定のコンテキストでルールを有効にするルールを含みます。

document.querySelector('style').textContent +=
    "@media screen and (min-width:400px) { div { color: red; }}"

http://jsfiddle.net/vfLS3/

30
Explosion Pills

私はこのように使用します。これにより、ドキュメントの乗算スタイルを更新できます

hTML：

<style class="background_image_styles">
</style>

jSで

$(".background_image_styles").text("@media (min-width: 1200px) {.user_background_image{background-image: url('https://placehold.it/1200x300');}}");
5
Server Izetov

汎用的に使用するために、document.headにスタイルシートを追加できます。次に、メディアクエリを含め、必要なMODをそこに配置できます。これはdocument.headの最後のスタイルシートであるため、以前のCSSルールを上書きします。

バニラJavaScript：

    let style = document.getElementById('custom-styles');
    if (!style) {
      style = document.createElement('style');
      style.id = "custom-styles";
      document.head.appendChild(style);
    }
    style.innerHTML =
      "@media screen and (min-width:400px) {...}";
0
terrymorse