根据屏幕宽度添加/删除 CSS ID

Add/Remove CSS id based on screen width

本文关键字：删除 CSS ID 添加 屏幕      更新时间：2023-09-26

一直在尝试让$("#id1").add();和$("#id2").remove();在这篇文章中的以下函数中工作。我正在让$("#id2").remove();从控制台工作，我也想让它们都从此功能内部工作。

(function($) {
    var $window = $(window),
    function resize() {
        if ($window.width() < 801) {
                $("#id1").add();       
                $("#id2").remove();       
    }
        else {
                $("#id2").add();       
                $("#id1").remove(); 
        }
    }
    $window
        .resize(resize)
        .trigger('resize');
})(jQuery);

或者，可以使用.addClass/.removeClass让它工作，但是它也必须针对所有子类。

媒体查询可用于切换元素的可见性：

.CSS 

/* show id1, hide id2, when screen resolution is 800px or less */
@media screen and (max-width: 800px) {
    #id1 {
        display:block; /*or inline, or whatever */
    }
    #id2 {
        display:none;
    }
}
/* show id2, hide id1, when screen resolution is greater than 800px */
@media screen and (min-width: 801px) {
    #id1 {
        display:none;
    }
    #id2 {
        display:block; /*or inline, or whatever */
    }
}

但是，如果需要实际在 DOM 中添加和删除它们，那么这个怎么样

(function($) {
    var $id1=$('#id1');
    var $id1Parent=$id1.parent();
    var $id2==$('#id2');
    var $id2Parent=$id2.parent();
    var $window = $(window),
    function resize() {
                $('#id1,#id2').remove();
        if ($window.width() < 801) {
                $id1Parent.append($id1);
    }
        else {
                $id2Parent.append($id2);
        }
    }
    $window
        .resize(resize)
        .trigger('resize');
})(jQuery);

显示"无"是处理此类情况的方法。

另一种方法是使用JQuery，但是如果你的代码变长，它会非常混乱。或者，如果div 代码真的很长，您可能希望使用 AJAX 加载div 部分。

function resize() {
    if ($window.width() < 801) {
            $("<div id='1'></div>").appendTo('.container'); //add it to your container       
            $("#id2").remove();       
    }
   else ......
}
相关文章：