0

私はDOMにこのdivを持っています

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

できればjqueryで選択できるようにIDを指定しました

私がやりたいことは、divをに変更することです

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

たとえば、画面サイズが600pxを下回った場合（元に戻す必要があると推測しているため、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

このようなものがうまくいくはずです。JavaScript を使用せずにタスクを達成するのに役立つ可能性があるため、CSS 3 メディア クエリを参照する必要があります。

$(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

メディアクエリの使用をお勧めします。jQuery への依存関係を削除します。

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

于 2012-11-24T21:43:57.393 に答える