Tạo truy vấn phương tiện CSS bằng javascript hoặc jQuery

Question

Có thể tạo quy tắc truy vấn phương tiện đầy đủ khi đang chạy bằng Javascript hoặc jQuery không?

Tôi đã sử dụng nhiều phương tiện truyền thông truy vấn để nhắm mục tiêu tổng quát khung nhìn và các thiết bị cụ thể/màn hình sử dụng CSS nội tuyến, nhập khẩu và các tập tin liên quan:

@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" /> 

tôi có thể thêm/gỡ bỏ các lớp học sử dụng jQuery:

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

tôi cũng đã nhìn vào document.stylesheets và dường như cổ xưa và trình duyệt cụ thể:

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

.210

Nhưng tôi không thể tìm thấy bất kỳ tài liệu tham khảo để programatically tạo:

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

từ javascript trực tiếp hoặc dưới mọi hình thức.

Answer 1

Bạn chỉ có thể cập nhật thành phần hiện tại <style> (hoặc tạo một) textContent để chứa quy tắc, điều này sẽ làm cho quy tắc có hiệu quả trong ngữ cảnh đã cho.

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

http://jsfiddle.net/vfLS3/

Answer 2

tôi sử dụng cách này. Điều này cho phép cập nhật phong cách nhân trong tài liệu

trong HTML:

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

trong JS

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