Question

我的DOM中有这个div

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

我给它一个id，以便我可以用jquery希望选择它

我想要做的是将div更改为

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

当屏幕尺寸低于600px时（我设置了id = changeback，因为我猜测生病需要将其还原回来吗？）我学习jquery所以会理解一些关于如何做到这一点的指针，或者是有没有办法使用CSS媒体查询？（不过我能想到的）

任何帮助表示赞赏

Answer 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/

Answer 2

这样的事情应该有效。您应该查看CSS 3媒体查询，因为它们可以帮助您完成任务而不涉及JavaScript。

$(window).resize(function(){
    if($(window).width() < 600 && $("#changeBack").length == 0){
        $("#divChange").attr("id", "changeBack");
    }
    else{
        $("#changeBack").attr("id", "divChange");
    }
});

Answer 3

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

$('#divChange').attr('id','changeBack');

Answer 4

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

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

更改div Jquery或CSS的名称

4 个答案: