Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Ajustar el color de fondo
Ya podemos cambiar el color y el tamaño del texto según los valores elegidos. Solo falta programar el ajuste del color de fondo del artículo. Se parece mucho al del color del texto, pero obtendremos los valores de la lista desplegable con la clase background-setting.
En CSS, la propiedad background-color controla el color de fondo. Para cambiarla desde JavaScript, escribiremos su nombre en camelCase.
¡Manos a la obra!
La propiedad style permite tanto cambiar estilos como consultar sus valores. Eso sí: solo permite consultar los estilos establecidos en el atributo style del propio elemento. También se conocen como estilos en línea.
Para obtener los estilos calculados que se aplican al elemento, usa el método window.getComputedStyle. Puedes leer más en la especificación.
Todos los archivos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews!</title>
</head>
<body class="page page-longread light-theme">
<header class="page-header">
<div class="container">
<a class="header-logo" href="index.html">
<img src="img/main-logo.svg" width="67" height="29" alt="Logotipo del portal FlashNews!">
</a>
<a href="subscription.html" class="subscription-link">Suscripción</a>
<button class="theme-button" type="button">Cambiar tema</button>
</div>
</header>
<main class="index-main">
<div class="controls">
<div class="container">
<div class="color-filters">
<label>Color del texto:
<select class="filter color-setting" name="font-color">
<option value="inherit" selected>Predeterminado</option>
<option value="black">Negro</option>
<option value="white">Blanco</option>
<option value="ghostwhite">Gris claro</option>
<option value="pink">Rosa</option>
<option value="darkred">Rojo oscuro</option>
<option value="darkorange">Naranja</option>
<option value="saddlebrown">Marrón</option>
<option value="gold">Dorado</option>
<option value="greenyellow">Verde lima</option>
<option value="forestgreen">Verde</option>
<option value="aquamarine">Aguamarina</option>
<option value="lightskyblue">Azul cielo</option>
<option value="lightsteelblue">Azul grisáceo</option>
<option value="darkblue">Azul oscuro</option>
<option value="indigo">Índigo</option>
<option value="mediumpurple">Violeta</option>
<option value="purple">Púrpura</option>
</select>
</label>
<label>Color del fondo:
<select class="filter background-setting" name="background-color">
<option value="inherit" selected>Predeterminado</option>
<option value="black">Negro</option>
<option value="white">Blanco</option>
<option value="ghostwhite">Gris claro</option>
<option value="pink">Rosa</option>
<option value="darkred">Rojo oscuro</option>
<option value="darkorange">Naranja</option>
<option value="saddlebrown">Marrón</option>
<option value="gold">Dorado</option>
<option value="greenyellow">Verde lima</option>
<option value="forestgreen">Verde</option>
<option value="aquamarine">Aguamarina</option>
<option value="lightskyblue">Azul cielo</option>
<option value="lightsteelblue">Azul grisáceo</option>
<option value="darkblue">Azul oscuro</option>
<option value="indigo">Índigo</option>
<option value="mediumpurple">Violeta</option>
<option value="purple">Púrpura</option>
</select>
</label>
</div>
<label>Tamaño del texto (<output class="pixels">14</output>px)
<input class="size-setting" type="range" min="8" max="48" step="1" value="14">
</label>
</div>
</div>
<article class="longread">
<div class="container">
<h1>Para qué sirven los algoritmos</h1>
<p>La palabra algoritmo asusta a muchas personas: parece algo complicado, pero en realidad es un conjunto completo de instrucciones. También usas algoritmos en la vida diaria, por ejemplo, cuando sigues una receta, utilizas un navegador para ir del punto A al punto B o resuelves una ecuación cuadrática.</p>
<p>Cuando quienes programan hablan de algoritmos, suelen referirse a soluciones conocidas para problemas habituales. Muchos algoritmos se inventaron antes que las computadoras: por ejemplo, el algoritmo de ordenamiento por dígitos se patentó en Estados Unidos en el siglo XIX para procesar los datos de un censo de población.</p>
<p>Un mismo problema puede resolverse con distintos algoritmos. Imagina que necesitas encontrar un elemento en una lista. Supongamos que es una lista de productos de una tienda en línea y alguien escribe en el filtro el nombre de un producto que empieza con «E». ¿Cómo lo encuentras?</p>
<p>Si la lista está ordenada alfabéticamente, puedes usar la búsqueda binaria: miras en la mitad de la lista y encuentras, por ejemplo, un producto cuyo nombre empieza con «K». Como la lista está ordenada y «E» va antes que «K», sabes que el producto que buscas está en la mitad izquierda. Tomas esa mitad y repites el procedimiento.</p>
<p>Si la lista no está ordenada, conviene una búsqueda secuencial: recorres los elementos desde el principio hasta encontrar el que te interesa. En el peor caso tendrás que revisarlos todos, pero podrás estimar de antemano cuánto tiempo tomará la búsqueda.</p>
<p>Elige el algoritmo según el problema. Identifica con qué datos trabajas y parte de ahí.</p>
</div>
</article>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<a class="footer-logo">
<img src="img/white-logo.svg" alt="Logotipo del portal FlashNews!">
</a>
</div>
</footer>
<script src="themes.js"></script>
<script src="read-mode.js"></script>
</body>
</html>
/* Estilos del artículo largo */
.controls {
padding: 16px 0 6px;
overflow-x: hidden;
}
.controls label {
font-size: 14px;
line-height: 24px;
margin-bottom: 14px;
}
.color-filters {
display: flex;
margin-right: -20px;
}
.color-filters label {
display: flex;
flex-direction: column;
flex-grow: 1;
margin-right: 20px;
}
.color-filters .filter {
margin-top: 4px;
}
.controls .filter {
margin-left: 0;
}
.longread {
min-height: calc(100vh - 237px);
padding-bottom: 1em;
font-size: 14px;
}
.longread h1 {
margin: 1em 0 0.6em;
line-height: 1.2;
}
.longread p {
margin: 0 0 0.8em;
line-height: 1.6;
}
/* Control de rango compatible sin scripts */
.size-setting {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
width: 100%;
height: 10px;
margin-top: 8px;
padding: 2px 0;
border-radius: 5px;
outline-offset: 0;
}
.size-setting::-webkit-slider-thumb {
box-sizing: border-box;
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
}
.size-setting::-moz-range-thumb {
box-sizing: border-box;
-moz-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
}
.size-setting::-ms-thumb {
box-sizing: border-box;
width: 20px;
height: 20px;
border-radius: 50%;
}
/* Temas de color */
.page-longread.light-theme {
background-color: #ffffff;
color: #333333;
}
.light-theme .controls {
background-color: #eae9f2;
}
.light-theme .size-setting {
background-color: #ffffff;
box-shadow: inset 0 0 0 1px #b6aaff;
outline-color: #b6aaff;
}
.light-theme .size-setting::-webkit-slider-thumb {
background-color: #ffffff;
border: 5px solid #6653d9;
}
.light-theme .size-setting::-moz-range-thumb {
background-color: #ffffff;
border: 5px solid #6653d9;
}
.light-theme .size-setting::-ms-thumb {
background-color: #ffffff;
border: 5px solid #6653d9;
}
.light-theme .size-setting::-webkit-slider-thumb:active {
background-color: #6653d9;
}
.light-theme .size-setting::-moz-range-thumb:active {
background-color: #6653d9;
}
.light-theme .size-setting::-ms-thumb:active {
background-color: #6653d9;
}
.page-longread.dark-theme {
background-color: #0a0910;
color: #f2f2f2;
}
.dark-theme .controls {
background-color: #17161a;
}
.dark-theme .size-setting {
background-color: #0a0910;
box-shadow: inset 0 0 0 1px #473c8d;
outline-color: #6653d9;
}
.dark-theme .size-setting::-webkit-slider-thumb {
background-color: #0a0910;
border: 5px solid #9484f2;
}
.dark-theme .size-setting::-moz-range-thumb {
background-color: #0a0910;
border: 5px solid #9484f2;
}
.dark-theme .size-setting::-ms-thumb {
background-color: #0a0910;
border: 5px solid #9484f2;
}
.dark-theme .size-setting::-webkit-slider-thumb:active {
background-color: #9484f2;
}
.dark-theme .size-setting::-moz-range-thumb:active {
background-color: #9484f2;
}
.dark-theme .size-setting::-ms-thumb:active {
background-color: #9484f2;
}
let longread = document.querySelector('.longread');
let colorSetting = document.querySelector('.color-setting');
let sizeSetting = document.querySelector('.size-setting');
let pixels = document.querySelector('.pixels');
colorSetting.onchange = function () {
longread.style.color = colorSetting.value;
};
sizeSetting.oninput = function () {
pixels.textContent = sizeSetting.value;
longread.style.fontSize = sizeSetting.value + 'px';
};
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
100%
Consola
- La lista desplegable «Color del fondo» tiene la clase
background-setting. Guárdala en la variablebackgroundSetting. - Agrega a la lista desplegable
backgroundSettingun manejador de eventosonchange. - Dentro del manejador, asigna a
longread.style.backgroundColorel valor debackgroundSetting.value. - En el mininavegador, elige «Rosa» en la lista «Color del fondo» y comprueba que el fondo del artículo se vuelve rosa.