0

Com ajuda do W3SCHOOL consegui criar esse código que insere um html através do JavaScript. Preciso também que um código específico seja mostrado se <700 e outr código seja exibido se >701. O código abaixo não funciona 100% pois quando redimensiono a janela ele não atualiza. Para funcionas 100% é preciso atualizar a página. Qual a maneira correta de utilizar Media Query com JAvascript?

<script>
function myFunction(x) {
  if (x.matches) { // If media query matches

/* === código html === */
var mb = document.createElement("div"); /* cria DIV */
mb.setAttribute("class", "conteiner"); /* seta a class="banner" para a DIV */

mb.innerHTML = /* ESTRUTURA html */
"<div class='secao-principal row-fluid sem-coluna'> " +
"<div class='row-fluid'> " +

"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +
"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +


"</div>" +
"</div>";       

var list = document.getElementById("corpo");
list.insertBefore(mb, list.firstChild);

} else {

/* === código html === */
var mb = document.createElement("div"); /* cria DIV */
mb.setAttribute("class", "conteiner"); /* seta a class="banner" para a DIV */

mb.innerHTML = /* ESTRUTURA html */
"<div class='secao-principal row-fluid sem-coluna'> " +
"<div class='row-fluid'> " +

"<div class='modulo span3'> <a href='' > <img src='https://picsum.photos/id/156/404/260?blur=5' alt=''/> </a> </div>" +


"</div>" +
"</div>";       

var list = document.getElementById("corpo");
list.insertBefore(mb, list.firstChild);


}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes



</script>
1
  • 1
    Não seria mais simples usar uma media query diretamente pelo CSS? Qual a necessidade de fazê-lo usando JavaScript? Commented 16/09/2019 às 23:17

1 Resposta 1

0

Usa o evento onresize (https://www.w3schools.com/jsref/event_onresize.asp). https://www.w3schools.com/howto/howto_js_media_queries.asp

Ele é executado quando a página é redimensionada. Você poderá fazer lógica dentro desse evento.

document.getElementById("getWidthWindow").innerHTML = `Tamanho da página ${window.outerWidth}px.`;


window.onresize = function(ev) {

//Sua implementação do código vai aqui dentro

//Pega o tamanho original da página conforme for redimensionando
let widthPage = ev.currentTarget.outerWidth;

var x1 = window.matchMedia(`(max-width: ${widthPage}px)`);

var x2 = window.matchMedia("(max-width: 700px)")
myFunction(x2) // Call listener function at run time
x2.addListener(myFunction) // Attach listener function on state changes

}
<p>Redimensiona a página.</p>
<div id="getWidthWindow">matchMedia: </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .