0

これが私の問題です。インライン スタイルを無効にする回避策として .removeAttr() を使用しました。削除した属性を復元する必要がある場合があります。まだ可能ですか？または、私が使用できる代替ソリューションを提案できますか。

removeAttr() のトリガーは、ブラウザーからのメディア クエリです。ブラウザのサイズが変更されると、dom 内の要素の位置も変更されます。デフォルトで、HTML にはインライン スタイルが使用されています。ただし、サイズを小さくする場合は、要素を別の位置に移動する必要があり、元の縮尺またはより広いビューに戻す場合は、削除された属性も復元する必要があります。

var delay = (function(){
    var timer = 0;
    return function(callback, ms){
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

jQuery(function() {

    var pause = 100; // will only process code within delay(function() { ... }) every 100ms.

    jQuery(window).resize(function() {

        delay(function() {

            var width = jQuery(window).width();

            if( width >= 958 && width <= 1400 ) {
                if(jQuery(".box1 #move_me").length == 0) {
                    // needs to restore the removed "style" attribute
                    jQuery("#move_me").appendTo(jQuery(".box1"));
                }
            } else if( width >= 768 && width <= 959 ) {

            } else if( width >= 480 && width <= 767 ) {
               jQuery("#move_me").insertAfter(".box2 .insert_below").removeAttr("style");
            } else if( width <= 479 ) {
               jQuery("#move_me").insertAfter(".box3 .insert_below").removeAttr("style");
            }

        }, pause );

    });

    jQuery(window).resize();

});

jsfiddle: http://jsfiddle.net/EFzy7/embedded/result/ (変更を確認するためにサイズを変更します) - 気付いた場合、デフォルトでは、より広い画面 (960px または 1200px 以上) を使用している場合、「hello world」赤で、arial フォントである必要があります。サイズを変更すると、別の div/box に移動します。ただし、サイズを変更してワイド スクリーンに戻すと、テキストは元の外観 (赤い arial) ではなくなります。

削除された属性を復元する方法はありますか? いいえの場合、私の問題の回避策は何だと思いますか?

ありがとうございました。

4

2 に答える 2

1

1 つの方法は、削除する前に要素 (または一部の要素またはドキュメント) にスタイルのデータ値を与えることです。その後、そのデータを介してそのスタイルを後で呼び出すことができます。

そのようです：

 jQuery("#move_me")
      .insertAfter(".box2 .insert_below")
      .data("reStyle", jQuery("#move_me").attr("style"))
      .removeAttr("style").removeAttr("style")

そして後で：

 jQuery("#move_me").attr("style", jQuery("#move_me").data("reStyle"))

例

于 2013-06-17T18:26:56.233 に答える