Eine Medienabfrage mit Javascript auslösen

Ist es möglich, die Medienabfrage @media (max-width: 600px) { .a { ... } } beim Klick auf eine Schaltfläche mit Javascript auszulösen? (ohne den Browser Breite, wirklich < 600px)Eine Medienabfrage mit Javascript auslösen

// $('#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" />

Quelle

2016-05-29 Basj

Sie nicht Medien Abfrage Stile mit JavaScript auslösen können, aber man kann es ihnen ermöglichen, durch einen separaten Sheet verwenden und seine media Attribut Modifizieren . Hier ist, was ich meine:

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 */ }

Quelle

2016-05-29 19:13:38 blex

Eine Medienabfrage mit Javascript auslösen

Antwort

Verwandte Themen