Las hojas de estilo en cascada tienen un papel en la estilización de website y/o AppWeb, la cual, los css permite dar diseños agradables y armoniosos a las paginas web.
Durante el proceso de estilización, existe una relación basada en declaraciones CSS + las @media queries, en donde:
Las declaraciones CSS corresponde a bloques específicos con estructura de selector propiedad y valor.
Las @media queries CSS permiten aplicar modificaciones en los estilos declarados, en función de una característica especifica, por ejemplo, el tamaño de una pantalla.
Esta es una relación muy armoniosa, sin embargo, ¿sabías que con JavaScript podrías lograr un trío interesante en materia de estilización de páginas web y no morir en el intento?
supongamos que tenemos el siguiente contenido HTML.
<htmllang="es">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<sectionclass="seccion">
<h1class="seccion__titulo">¡hola mundo!h1>
<pclass="seccion__parrafo">Te Saluda Fabio H. Mancipep>
<buttonclass="seccion__boton">Dame Clickbutton>
section>
body>
html>
y le damos algo de vida al contenido, con la siguiente declaración CSS
.seccion {
display: flex;
flex-direction: column;
align-items: center;
background: papayawhip; /*¿te parece conocido? dime en los comentarios de donde lo recuerdas...*/margin: 10px;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
ahora bien, supongamos que queremos para la sección un color diferente, digamos que queremos color violeta para tablet y aguamarina para pantallas de PC (o más grandes); en este orden de ideas, tenemos las @media queries y lo realizamos de la siguiente forma.
/*tablet*/
@media (min-width: 500px) {
.seccion {
background-color: violet;
}
}
/*pc*/
@media (min-width: 800px) {
.seccion {
background-color:aquamarine ;
}
}
llegados a este punto, nuestro codigo se encuentra de la siguiente forma:
<htmllang="es">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.seccion {
display: flex;
flex-direction: column;
align-items: center;
background: papayawhip; /*¿te parece conocido? dime en los comentarios de donde lo recuerdas...*/margin: 10px;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
/*tablet*/
@media (min-width: 500px) {
.seccion {
background-color: violet;
}
}
/*pc*/
@media (min-width: 800px) {
.seccion {
background-color:aquamarine ;
}
}
style>
head>
<body>
<sectionclass="seccion">
<h1class="seccion__titulo">¡hola mundo!h1>
<pclass="seccion__parrafo">Te Saluda Fabio H. Mancipep>
<buttonclass="seccion__boton">Dame Clickbutton>
section>
body>
html>
Si realizas la prueba, notarás que el color de fondo de la sección cambia en función al tamaño de pantalla hacia lo ancho.
ahora bien, ¿que pasaría si necesitamos cambiar de color de la sección, en función de la interacción del usuario con un objeto?
para resolver la necesidad, entra en escena JavaScript para satisfacer todas nuestras pasiones, con el objeto style…
Supongamos que queremos cambio de color en la sección cuando el usuario de click en el botón [Dame Click], para ello utilizamos el Style para manipular una declaración de estilo individual, de la siguiente forma:
<script>document.querySelector(".seccion").addEventListener("click", function(){
document.querySelector(".seccion").style.background = "brown";
});
</script>Se ha utilizado el elemento JS addEventListener para identificar el evento especifico click; una vez se identifica, se ejecuta el contenido de la función anónima, la cual busca un selector .seccion, es decir, que coincida con una clase con nombre seccion, luego el objeto style, busca la propiedad CSS background y aplica el valor “brown”.
con el objeto style de JavaScript, puedes manipular los valores CSS de propiedades ya declaradas, o puedes agregar una nueva propiedad CSS con su valor al selector deseado, y así tendrás un triángulo amoroso fascinante.
código completo:
<htmllang="es">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.seccion {
display: flex;
flex-direction: column;
align-items: center;
background-color: papayawhip; /*¿te parece conocido? dime en los comentarios de donde lo recuerdas...*/
margin: 10px;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
/*tablet*/
@media (min-width: 500px) {
.seccion {
background-color: violet;
}
}
/*pc*/
@media (min-width: 800px) {
.seccion {
background-color:aquamarine ;
}
}
style>
head>
<body>
<sectionclass="seccion">
<h1class="seccion__titulo">¡hola mundo!h1>
<pclass="seccion__parrafo">Te Saluda Fabio H. Mancipep>
<buttonclass="seccion__boton">Dame Clickbutton>
section>
body>
html>
<script>
document.querySelector(".seccion").addEventListener("click", function(){
document.querySelector(".seccion").style.background = "brown";
});
script>
