Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Cambiar el tamaño de la fuente
Ya podemos obtener el valor del control deslizante y mostrarlo en la página. Sin embargo, el tamaño de la fuente del artículo aún no cambia. Para lograrlo, usaremos el valor obtenido en los estilos del artículo. Volveremos a usar la propiedad style.
En CSS, la propiedad font-size controla el tamaño de la fuente. Al acceder a estas propiedades con un punto en JavaScript, usamos nombres sin guiones y separamos las palabras con camelCase. Por ejemplo:
| CSS | JavaScript |
|---|---|
| font-size | fontSize |
| background-color | backgroundColor |
| border-left-width | borderLeftWidth |
Así que, para cambiar el tamaño de la fuente, debemos asignar un nuevo valor a la propiedad fontSize:
let element = document.querySelector('p');
// Asignamos al párrafo un tamaño de fuente de 24px
element.style.fontSize = '24px';La propiedad value del control deslizante devuelve una cadena con el número elegido. Pero para establecer el tamaño de la fuente también necesitamos una unidad de medida: en este caso, píxeles. Usaremos la concatenación para formar el valor correcto:
longread.style.fontSize = sizeSetting.value + 'px';Supongamos que el usuario elige el número 16 con el control deslizante. En los estilos del elemento se guardará el resultado de la concatenación: '16px'.
<article class="longread" style="font-size: 16px">Apliquemos al texto del artículo el tamaño elegido y comprobemos que el ajuste funciona.
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.onchange = function () {
pixels.textContent = sizeSetting.value;
// Cambia aquí el tamaño del texto
};
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