JavaScriptを使用してメディアクエリをトリガーする

Javascriptでボタンをクリックするとメディアクエリ@media (max-width: 600px) { .a { ... } }をトリガーすることはできますか？（ブラウザの幅を持つことなく、本当に < 600PX）JavaScriptを使用してメディアクエリをトリガーする

// $('#b').click(function(){ // trigger the media query });

.a { background-color: green; } 
 

 
@media (max-width: 600px) { 
 
    .a { background-color: yellow; /* many other rules */ } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="a">Hello</div> 
 
<input id="b" type="button" value="Change" />

出典

2016-05-29 Basj

あなたはJavaScriptでメディアクエリスタイルをトリガすることはできませんが、別のスタイルシートを使用して、そのmedia属性を変更することによって、それらを有効にすることができます。ここで私が何を意味するかです：

index.htmlを

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel="stylesheet" media="all" href="regular_styles.css"> 
    <link rel="stylesheet" media="(max-width: 600px)" href="small_screen.css" id="small"> 
</head> 
<body> 

    <div class="a">Hello</div> 
    <input id="b" type="button" value="Change" /> 

    <script src="jquery.min.js"></script> 
    <script> 
     $('#b').click(function(){ 
      // set the media query perimeter to "all" 
      $('#small').attr('media', 'all'); 
     }); 
    </script> 
</body> 
</html>

regular_styles.css

.a { background-color: green; }

small_screen.css

.a { background-color: yellow; /* many other rules */ }

出典

2016-05-29 19:13:38 blex

JavaScriptを使用してメディアクエリをトリガーする

答えて

関連する問題