how to Change element of html using jquery
Question
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function() {
if($(window).width() < 767){
$("#second").insertBefore("#first"); }
else{
$("#first").insertBefore("#second"); }
});
});
</script>
I want to change the html element. In the above code nothing is wrong but when our screen size has already small (< 767) it will not work due to resize() function and when we remove resize function then it will work but it failure when we increase the screen size. It can't change the element. Actually i am looking a solution like @media css property. We all Know when we use media we can see the effect through inspector. I got a code but it will not working
document.querySelector('style').textContent += "@media screen and (max-width:767px) {"+
$("#second").insertBefore("#first");+" }";
Actually the code was not same. I edited and try to run but not working. How to change elements like in small screen with media query? or any other solution but must be responsive
5 answers
solution1
1 2017-08-21 10:27:15
<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>
solution2
0 2017-08-21 10:24:28
您必须使用.trigger(resize);
solution3
0 2017-08-21 10:29:33
U can use @media screen for example:
@media screen and (max-width: 480px) { #info { font-size: 0.6em; }
In CSS Of course
solution4
0 2017-08-21 10:34:05
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"); }
}
solution5
0 ACCPTED 2017-08-21 10:43:06
Do you mean to swap html elements according to screen width? If so, why not use 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.