如何用媒体查询删除类

How to remove class with media queries

本文关键字：删除 查询 媒体 何用      更新时间：2023-09-26

当@media screen and (max-width: 500px)正在活动移除类时。褪色。我该怎么做呢?我的脚本在下面。

@media screen and (max-width: 500px) {
    .post_profile_image{
        width:35px;
        height:35px
    }
    .fade{
    /* Remove this class */
    }
}
<div id="myModal" class="modal fade" role="dialog">

如何使用媒体查询删除类

你不。相反，您可以定义新规则，这些规则应用于执行您想要完成的样式的类。媒体查询不能为元素添加或删除类，它们只能改变应用于元素的规则。

$(window).resize(function(){
 If($(window).width()<500){
  $('.fade').removeClass('fade');
 }
});

只有CSS你不能从DOM中删除它。但. .你可以覆盖它。只需在正确的位置定义该类。

调整jsFiddle中HTML框的大小。

演示:jsFiddle

HTML 

<div id="myModal" class="modal fade" role="dialog">
CSS: 

.fade { 
     opacity: 0; 
     transition: opacity 0.15s linear;
     -o-transition: opacity 0.15s linear; 
     -webkit-transition: opacity 0.15s linear; 
}
.fade:hover {
    opacity: 1
}
@media screen and (min-width: 0px) and (max-width: 500px) {
    .post_profile_image{
        width:35px;
        height:35px
    }
    .fade{
        transition: none;
        -o-transition: none; 
        -webkit-transition: none; 
    }
}

检查此代码。我希望这对你有帮助。

   $(window).on('resize', function(){
              var win = $(this); //this = window
              if (win.width()< 500) { $('#myModal').removeClass('fade'); }
         });
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="myModal" class="modal fade" role="dialog">Hello there</div>

你可以更容易地做到，检查这个

if($(".toChange").css("border-block-color") == "rgb(0, 0 , 0)"){
$(".toChange").removeClass("toQuit")
}
//Basic, if the ".toChange" element has a property in css that is equal to "rgb(0, 0, 0)" that is the way to refer to black color. We proceed to execute the next block.
// In the next Block we use .removeClass("name_of_class_what_we_wanna_destroy") to quit the "toQuit" class when this happen
@media (min-width: 1900px){
.toChange{
  border-block-color:aliceblue!important;
  }
}
/* we use media screen to send a style that the browser won't show, but the jquery can read, so this is easier way, don't you worry, the property border-block-color is almost invisible, it's only used to make one change when the window's size be = than what when are looking for to quit the class
- less Css 
- less JQuery 
+ More production
*/ 
<div class="toChange toQuit">
</div>
<!-- We wanna quit the "toQuit" class when window size is > than 1900px -->

D 
$(function(){
    $(window).on('resize', function(){
        if(window.innerWidth < 500){
            $('#slide-menu').removeClass('fade');
            
        }
    });
});
相关文章：