Как на js вычислить ширину блока и подставить её в медиа запрос (в max-width
)?
@media only screen and (max-width: 2191px) {
}
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуКак на js вычислить ширину блока и подставить её в медиа запрос (в max-width
)?
@media only screen and (max-width: 2191px) {
}
Можно изменить, если стили определениы в html документе.
let maxWidth = 0;
let sign = 1;
setInterval(() => {
if (maxWidth < 0 || maxWidth > 1200) {
sign *= -1;
}
maxWidth += 20 * sign;
document.querySelector('.styles').innerText = `@media only screen and (max-width: ${maxWidth}px) {
.my-class {
background-color: red;
}
}`;
}, 20);
.my-class {
width: 100px;
height: 100px;
}
<div class="my-class"></div>
<style class="styles">
@media only screen and (max-width: 0) {
.my-class {
background-color: red;
}
}
</style>