Question

如何检查body标签是否具有某个类，然后将一些css应用于其他类，但仅限于屏幕较小（在媒体查询中）？我的身体标签改变了javascript的类，并且hass要么是class =＆＃34; menu＆＃34;或者类=＆＃34;菜单菜单 - 打开＆＃34;。现在，如果屏幕是最大宽度：640px和class =＆＃34; menu＆＃34;我需要为class =＆＃34; logo＆＃34;添加css。（显示：表格，保证金：0自动）。我怎么能这样做？

Answer 1

假设您有＆＃39;徽标＆＃39;在body内，我认为您要求在正文menu但不的情况下应用规则在类列表中有menu-open：

@media all and (max-width: 640px) {
    body.menu:not(.menu-open) .logo {
        display: table;
        margin: 0 auto;
    }
}

Answer 2

@media (max-width: 640px) {
    body.menu .logo {
        display: table;
        margin: 0 auto;
    }
}

Answer 3

使用jQuery执行此操作的最简单方法。您可以查看窗口宽度和正文类，如下所示：

var bodyTag = $('body');
var logo = $('.logo');
if($(window).width() < 640 && $(bodyTag).hasClass('menu')) {
    $(logo).css({
         dislpay: 'table',
         margin: '0 auto'
    });
}

但我建议仅将css用于此类任务。

检查body标签是否为hass类，并在媒体查询中为某些类应用css

3 个答案: