Создание медиа-запросов CSS с помощью javascript или jQuery
можно ли создавать полные правила запросов мультимедиа на лету с помощью 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 напрямую или в любой форме.
2 ответов
вы можете просто обновить существующий <style>
элемент (или создать) textContent
содержать правило, которое сделает его эффективным в данном контексте.
document.querySelector('style').textContent +=
"@media screen and (min-width:400px) { div { color: red; }}"
Я использую этот способ. Это позволяет обновлять стили multiply в document
в 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');}}");