jqueryを使用してhtmlの要素を変更する方法

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(window).resize(function() { 
    if($(window).width() < 767){ 
    $("#second").insertBefore("#first"); } 
    else{ 
     $("#first").insertBefore("#second"); } 
    }); 
}); 
</script>

html要素を変更したいと思います。上記のコードでは何も間違っていませんが、画面サイズがすでに小さくなっている場合（< 767）、resize（）関数によって機能しません。また、resize関数を削除しても機能しますが、画面サイズを大きくすると失敗します。要素を変更することはできません。実際に私は@ media cssのようなソリューションを探しています。私たちは皆、私たちがメディアを使う時、私たちはインスペクタを通してその効果を見ることができます。コードがありますが、機能しません。jqueryを使用してhtmlの要素を変更する方法

document.querySelector('style').textContent += "@media screen and (max-width:767px) {"+ 
$("#second").insertBefore("#first");+" }";

実際はコードは異なります。私は編集して実行しようとしていますが、動作しません。メディアクエリで小さな画面のような要素を変更するにはどうすればよいですか？または任意の他の解決策だが

出典

2017-08-21 Amit Kumar

html要素を画面の幅に応じて入れ替えることはできますか？もしそうなら、なぜCSSを使用しないのですか？

<style> 
.hidden { 
    display: none; 
} 

@media screen and (min-width: 768px) { 
    #first-copy, #second-copy { 
    display: block; 
    } 

    #first, #second { 
    display: none; 
    } 
} 
</style> 

<html> 
<div id="first" style="border: 1px solid; width: 100px; text-align: center"> 
    <p> 
    first element 
    </p> 
</div> 
<div id="second" style="border: 1px solid; width: 100px; text-align: center"> 
    <p> 
    second element 
    </p> 
</div> 
<div id="second-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center"> 
    <p> 
    second element 
    </p> 
</div> 
<div id="first-copy" class="hidden" style="border: 1px solid; width: 100px; text-align: center"> 
    <p> 
    first element 
    </p> 
</div> 
</html>

https://jsfiddle.net/8sug5pws/2/

出典

2017-08-21 10:43:06 jonhendrix

これは別の解決策です。 –

あなたはUは、例えば@media画面を使用することができます.trigger(resize);

出典

2017-08-21 10:24:28

あなたはそれについての詳細を伝えることができますか？私はhttp://api.jquery.com/trigger/からの.triggerに関連する情報を見つけましたが、まだ私は.triggerでサイズ変更を使用する方法がわかりません。 –

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(window).resize(function() { 
     change(); 
    }); 
    change(); 
}); 
function change(){ 
    if($(window).width() < 767){ 
     $("#second").insertBefore("#first"); 
    } 
    else 
    { 
     $("#first").insertBefore("#second"); 
    } 
} 
</script>

出典

2017-08-21 10:27:15 Kashyap

を使用する必要があり応答する必要があります。もちろん、CSSで

@media screen and (max-width: 480px) { 
 
    #info { 
 
    font-size: 0.6em; 
 
}

出典

2017-08-21 10:29:33 ROCKY

try this code its working fine... 

    resize_solution(); 
    $(document).ready(function(){ 
     $(window).resize(function() { 
      resize_solution(); 
     }); 
    }); 
    function resize_solution(){ 
     if($(window).width() < 767){ 
      $("#second").insertBefore("#first"); 
     } 
     else{ 
      $("#first").insertBefore("#second"); } 
    }

出典

2017-08-21 10:34:05

jqueryを使用してhtmlの要素を変更する方法

答えて

関連する問題