如何更改媒体查询中的元素类

Posted 2023-03-06

【中文标题】如何更改媒体查询中的元素类

【英文标题】：how could change element class in media query

【发布时间】：2015-10-22 18:22:33

【问题描述】：

<button id='123'  type="button" class="btn btn-xs btn-danger">
<i class="fa fa-trash"></i>
</button>


@media only screen and (min-width: 600px)  .... 

我希望在 min-width:600px , 更改按钮 id='123' class="btn btn-lg btn-danger"

请帮帮我！

【参考方案1】：

您不能使用媒体查询更改元素的类。但您可以在 2 个不同的按钮之间切换：

<button type="button" class="btn btn-xs btn-danger visible-xs-block">
   <i class="fa fa-trash"></i>
</button>
<button type="button" class="btn someOtherClass hidden-xs">
   <i class="fa fa-trash"></i>
</button>

为了实现这一点，有预定义的引导辅助类可以根据屏幕大小显示/隐藏元素。在您的情况下，visible-xs 只会在小屏幕上显示元素，而 hidden-xs 会在大屏幕上隐藏元素。

【参考方案2】：

您不能使用 CSS 更改元素的类列表。但是，您可以使用媒体查询更改 CSS 类的定义。

如果你想改变一个元素上的一个或多个类，你可以像这样使用 jQuery：

$(window).on('resize', function() 
  var win = $(this);
  if (win.width() > 600) 

    $('#123').addClass('btn-lg');

   else 
    $('#123').removeClass('btn-lg');
  
);