[英]Generating CSS media queries with javascript or 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 直接或以任何形式。
您可以更新現有的<style>
元素(或創建一個) textContent
以包含規則,這將使其在給定的上下文中有效。
document.querySelector('style').textContent +=
"@media screen and (min-width:400px) { div { color: red; }}"
我用這種方式。 這允許更新文檔中的多種樣式
在 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');}}");
對於一般用途,您可以將樣式表附加到document.head
。 然后你可以把任何你想要的 mods 放在那里——包括媒體查詢。 由於它是document.head
的最終樣式表,因此它會覆蓋任何先前的 CSS 規則。
原生 JavaScript:
let style = document.getElementById('custom-styles');
if (!style) {
style = document.createElement('style');
style.id = "custom-styles";
document.head.appendChild(style);
}
style.innerHTML =
"@media screen and (min-width:400px) {...}";
我更喜歡這個變體 - 附加到頭部部分的末尾:
$('<style/>', {
text: '@media print { @page { margin: 10 20 20 10; } body { margin: 0.5cm; }}',
appendTo: win.document.head
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.