Есть ли способ получить значение внутри медиа-запроса с помощью jquery?Получить значение медиа-запроса с помощью JQuery
Пример:
@media(max-width:767px) { .story {color: black} }
Использование JQuery получить значение внутри скобок:
max-width:767
Вы можете перебирать document.styleSheets, проверьте .cssRules или .rules правило таблицы стилей является instanceofCSSMediaRule, если это правда, итерация CSSMediaRule.cssRules для получения .cssText из CSSMediaRule.
@media(max-width:767px) {
.story {
color: black
}
}<span class="story">span</span>
<script>
for (let sheet of document.styleSheets) {
for (let rule of (sheet.cssRules || sheet.rules)) {
if (rule instanceof CSSMediaRule) {
cssmedia: for (let prop of rule.cssRules) {
let mediarules = prop.parentRule.media;
for (let i = 0; i < mediarules.length; i++) {
if (mediarules[i] === "(max-width: 767px)") {
document.querySelector(prop.selectorText)
.textContent = prop.cssText;
break cssmedia;
}
}
}
}
}
}
</script>Если вы пытаетесь прослушивать изменения запроса средств массовой информации вы можете использовать window.matchMedia(), .addListener(); см Testing media queries
var mql = window.matchMedia("(max-width: 767px)");
mql.addListener(query)
query(mql)
function query(mediaquery) {
console.log(mediaquery);
if (mediaquery.matches) {
// media query matches
} else {
// media query does not match
}
};
Измерительной ширину экрана на изменении размера окна, я проверить правило CSS, который изменяется по запросу СМИ. Таким образом, независимо от того, как браузер относится к полосе прокрутки, запрос на мультимедиа будет срабатывать одновременно. ---- это просто пример -----------
$ (документ) .ready (функция() {
checkSize();
$(window).resize(checkSize);
});
функция checkSize() { если ($ ("SampleClass "). CSS (" поплавок") == "никто") {
}
}
Во-первых, вы не можете иметь JQuery внутри CSS. Чего вы пытаетесь достичь? Добавьте фрагмент кода и объясните свои проблемы. –
Я знаю, что не могу этого сделать. Это не то, что я прошу. У меня нет фрагментов кода, которые я пытаюсь обвести вокруг, если это возможно. Подобно тому, как вы можете получить атрибуты значения элемента класса с помощью jquery, я пытаюсь получить значение того, что находится в круглой скобке медиа-запроса. то есть: 'var media = 'max-width: 767';' из css '@media (max-width: 767px) {.story {color: black}}' – user3705143
jQuery работает с элементами в DOM. Вы не можете использовать его для получения значений из CSS. Если вы хотите получить текущую ширину окна, тогда это возможно. var max = $ (document) .width(); –