Probé el método window.screen.width, pero parece que el script se ejecuta solo una vez (cuando se carga la página), estoy buscando un método para usar para que el código pueda estar siempre ejecutándose.
Aquí está mi código JavaScript:
var textinSelected = document.getElementById("selectedText").innerHTML;
setInterval(function(){
if (window.screen.width << 1200) {
document.getElementById("selectedText").innerHTML = "";
}
else if (window.screen.width >> 1200){
document.getElementById("selectedText").innerHTML = textinSelected;
}
});
Aquí está el div HTML objetivo:
<div class="selected shadow-sm"><p id="selectedText">Catégories</p></div>
Tenga en cuenta que << y >> son operadores de desplazamiento de bits, no para comparar como < y >.
- Emiel Zuurbier
27/03/2021 a las 21:19
Tienes que escuchar el evento de cambio de tamaño en la ventana, pero deberías usar consultas de medios CSS en su lugar
- Rafaël
27/03/2021 a las 21:19
¿Cuál es el punto de usar << >> en primer lugar
- Roko C. Buljan
27/03/2021 a las 21:19
------------------------------------
Con CSS, lo que preferirías hacer.
#selectedText {
display: none;
}
@media screen and (min-width: 1200px) {
#selectedText {
display: block;
}
}
O con JavaScript usando window.matchMedia()
// Select the text element and value.
const selectedTextElement = document.querySelector('#selectedText');
const textValue = selectedTextElement.textContent;
// Create a media query.
const mediaQuery = window.matchMedia('(min-width: 1200px)');
// Toggle the text based on the media query.
const onMediaQueryChange = event => {
if (event.matches) {
selectedTextElement.textContent = textValue;
} else {
selectedTextElement.textContent = '';
}
};
// Listen for changes whenever the screen size changes.
mediaQuery.addEventListener('change', onMediaQueryChange);
------------------------------------
Puedes usar el evento de cambio de tamaño de ventana en lugar de setInterval. También deberías usar window.innerWidth en lugar de window.screen.width. window.innerWidth devuelve la ventana gráfica del navegador, mientras que window.screen.width devuelve el tamaño de pantalla del dispositivo (no del navegador).
var textinSelected = document.getElementById("selectedText").innerHTML;
window.addEventListener('resize', function() {
if (window.innerWidth < 1200) {
document.getElementById("selectedText").innerHTML = "";
}
else {
document.getElementById("selectedText").innerHTML = textinSelected;
}
});
<div class="selected shadow-sm"><p id="selectedText">Catégories</p></div>
------------------------------------
No tienes que usar Javascript, simplemente puedes usar CSS y hacer esto (y creo que usar CSS es mucho mejor y saludable para tu sitio):
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="selected shadow-sm"><p id="selectedText">Catégories</p></div>
<style>
:root {
--blank: red;
}
@media (max-width: 1200px) {
:root {
--blank: white;
}
}
#selectedText{
color: var(--blank);
}
</style>
</body>
</html>
