0

我的 DOM 中有这个 div

<div class="span4 minus65" id="divChange">

我给了它一个 id 以便我可以用 jquery 选择它

我想要做的是将 div 更改为

<div class="span12" id="changeBack">

例如，当屏幕尺寸低于 600 像素时（我已经设置了 id=changeback，因为我猜我需要将其恢复回来？）我正在学习 jquery，所以希望能得到一些关于如何在此处实现这一点的指示，或者有没有办法使用 CSS 媒体查询？（虽然没有我能想到的）

任何帮助表示赞赏

4

4 回答 4

1

使用该resize事件来检测窗口何时调整大小，并相应地应用适当的 id。

$(window).resize(function(){
    if($(this).outerWidth() < 600){
        $('#divChange').attr('id',"changeBack");
    }else{
        $('#changeBack').attr('id',"divChange");
    }
});

这是一个演示：http: //jsfiddle.net/JkypX/

（调整右下角的结果窗格大小以查看发生的变化）

通过维护当前 ID 并使用媒体查询指定不同的样式，可以为 CSS 目的实现等效效果：

#divChange{
    color:red;
}
@media all and (max-width: 600px){
    #divChange{
        color:green;
    }
}

当然，这是否更适合您取决于您​​要达到的目标。

这是这种方法的演示：http: //jsfiddle.net/JkypX/1/

于 2012-11-24T21:38:33.617 回答
1

像这样的东西应该工作。您应该查看 CSS 3 Media Queries，因为它们可能会帮助您在不涉及 JavaScript 的情况下完成任务。

$(window).resize(function(){
    if($(window).width() < 600 && $("#changeBack").length == 0){
        $("#divChange").attr("id", "changeBack");
    }
    else{
        $("#changeBack").attr("id", "divChange");
    }
});
于 2012-11-24T21:38:43.833 回答
0

您可以使用 jQuery 来更改 'id' 属性，如下所示：

$('#divChange').attr('id','changeBack');
于 2012-11-24T21:38:41.787 回答
0

我建议使用媒体查询。删除对 j​​Query 的任何依赖。

http://webdesignerwall.com/tutorials/css3-media-queries

于 2012-11-24T21:43:57.393 回答