Доступ к правилам медиа-запросов CSS через JavaScript/DOM
я использую ряд библиотек (включая мою собственную) для динамической загрузки активов на основе медиа-запросов, которые я изложил в CSS-файлах. Например:
в CSS:
@media screen and (max-width: 480px) {
.foo {
display: none;
}
}
и использование загрузчика активов;требуют.js, modernizr.js etc или использование window.matchMedia
и связанного с addListener()
функции:
if (function("screen and (max-width: 480px)")){
// Load several files
load(['mobile.js','mobile.css']);
}
объявление их дважды неудобно / глупо, и, насколько я могу найти, все вспомогательные библиотеки JS и загрузчики активов требуют, чтобы вы повторяли медиа-запросы, а не находили их программно от JS / DOM.
Итак, я изучал возможность доступа к значениям программно через document.stylesheets
, но я не уверен, что они доступны, и, кажется, очень мало документации, чтобы предположить, что они есть.
дальше я ищу CSSMediaRule
и с помощью console.dir(document.stylesheets)
среди других, чтобы исследовать объект stylesheet.
но нет ссылки сделаны (в пределах document.stylesheets
) к фактическим правилам медиа - запросов, используемым в CSS-только классы, которые будут применяться в результате медиа-запросов... То, что я пытаюсь найти, программно, это:
" экран и (максимальная ширина: 480px)"
есть ли способ получить доступ к такому css Media query правила через JavaScript / DOM?
2 ответов
для получения правил Используйте кросс-браузер вариант:
var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules; // IE <= 8 use "rules" property
для обнаружения объекта CSSMediaRule в списке правил Используйте (не работает в IE = 9):
var i = 0;
if (rules[i].type == 4)
{
// Do something
}
некоторые функции для получения стилей из текущего DOM (не работает в IE
function getCssRulesFromDocumentStyleSheets(media)
{
var resultCssRules = '';
for (var i = 0; i < document.styleSheets.length; i++)
{
var styleSheet = document.styleSheets[i];
if (isRuleFromMedia(styleSheet, media))
resultCssRules += getCssRulesFromRuleList(styleSheet.cssRules || styleSheet.rules, media);
}
return resultCssRules;
}
function getCssRulesFromRuleList(rules, media)
{
var resultCssRules = '';
for (var i = 0; i < rules.length; i++)
{
var rule = rules[i];
if (rule.type == 1) // CSSStyleRule
{
resultCssRules += rule.cssText + "\r\n";
}
else if (rule.type == 3) // CSSImportRule
{
if (isRuleFromMedia(rule, media))
resultCssRules += getCssRulesFromRuleList(rule.styleSheet.cssRules || rule.styleSheet.rules, media);
}
else if (rule.type == 4) // CSSMediaRule
{
if (isRuleFromMedia(rule, media))
resultCssRules += getCssRulesFromRuleList(rule.cssRules || rule.rules, media);
}
}
return resultCssRules;
}
function isRuleFromMedia(ruleOrStyleSheet, media)
{
while (ruleOrStyleSheet)
{
var mediaList = ruleOrStyleSheet.media;
if (mediaList)
{
if (!isMediaListContainsValue(mediaList, media) && !isMediaListContainsValue(mediaList, 'all') && mediaList.length > 0)
return false;
}
ruleOrStyleSheet = ruleOrStyleSheet.ownerRule || ruleOrStyleSheet.parentRule || ruleOrStyleSheet.parentStyleSheet;
}
return true;
}
function isMediaListContainsValue(mediaList, media)
{
media = String(media).toLowerCase();
for (var i = 0; i < mediaList.length; i++)
{
// Access to mediaList by "[index]" notation now work in IE (tested in versions 7, 8, 9)
if (String(mediaList.item(i)).toLowerCase() == media)
return true;
}
return false;
}
функции пример использования:
<style type="text/css">
@media screen and (max-width: 480px) {
p { margin: 10px; }
}
@media screen and (max-width: 500px) {
p { margin: 15px; }
}
@media print {
p { margin: 20px; }
}
</style>
<!-- ... -->
<script type="text/javascript">
alert(getCssRulesFromDocumentStyleSheets('print'));
alert(getCssRulesFromDocumentStyleSheets('screen and (max-width: 480px)'));
// For IE (no space after colon), you can add fix to "isMediaListContainsValue" function
alert(getCssRulesFromDocumentStyleSheets('screen and (max-width:480px)'));
</script>
вот Скрипка JS для него:https://jsfiddle.net/luisperezphd/hyentcqc/
вот как я это делаю:
в css создайте классы для отображения или скрытия содержимого в различных точках останова. Это удобная утилита в любом случае. Они уже доступны в Twitter Bootstrap, например.
<style type="text/css">
.visible-sm, .visible-md, .visible-lg{
display:none;
}
@media (max-width: 480px) {
.visible-sm{
display: block;
}
}
@media (min-width: 481px) and (max-width: 960px) {
.visible-md{
display: block;
}
}
@media (min-width: 961px) {
.visible-lg{
display: block;
}
}
</style>
во всех ваших документах добавьте пустые промежутки с этими классами. Они не будут отображаться на странице, если вы будете держать пяди inline.
<span id="media_test">
<span class="visible-sm"></span>
<span class="visible-md"></span>
<span class="visible-lg"></span>
</span>
добавьте это короткое расширение jquery в файл скрипта. Это устанавливает новый класс В теге body, который соответствует текущий медиа-запрос.
(function ($) {
$.fn.media_size = function () {
//the default port size
var size = 'lg';
//the sizes used in the css
var sizes = ['sm','md','lg'];
//loop over to find which is not hidden
for (var i = sizes.length - 1; i >= 0; i--) {
if($('#media_test .visible-'+sizes[i]).css("display").indexOf('none') == -1){
size = sizes[i];
break;
};
};
//add a new class to the body tag
$('body').removeClass(sizes.join(' ')).addClass(size);
}
}(jQuery));
$(document).media_size();
теперь у вас есть автоматическая интеграция с вашим css media queries Modernizr style.
вы можете написать javascript (jquery), который зависит от ваших медиа-запросов:
<a href="#">how big is this viewport?</a>
<script type="text/javascript">
$('.sm a').click(function(e){ alert('Media queries say I\'m a small viewport');});
$('.lg a').click(function(e){ alert('Media queries say I\'m a large viewport');});
</script>