17

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 から直接または任意の形式で。

4

3 に答える 3

5

私はこのように使います。これにより、ドキュメント内の複数のスタイルを更新できます

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');}}");
于 2016-02-29T14:57:38.893 に答える