La carta del bar cambia cada día
El bar del instituto cambia el menú cada día. Nadie reescribe la carta entera: borran un precio y escriben otro.
Con JavaScript puedes hacer eso con una página. Buscas un elemento y le cambias el texto, el color o lo que quieras.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| textContent | El texto de un elemento. Puedes leerlo y también escribirlo. | title.textContent |
| style | Los estilos de un elemento, uno por uno. | title.style.color |
| Clase | Un nombre de CSS que pones a un elemento para darle un estilo. | class="offer" |
| classList | La lista de clases de un elemento. Tiene add y remove. | li.classList.add("offer") |
| createElement | Crea una etiqueta nueva que todavía no está en la página. | document.createElement('li') |
| appendChild | Pone un elemento dentro de otro, al final. | menu.appendChild(li) |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Cambiar un texto
Ya sabes buscar un elemento. Ahora, a la derecha de textContent, pones un signo igual y el texto nuevo.
Es como asignar un valor a una variable. El navegador repinta la página al instante.
Pruébalo: cambiar dos textos
<h1 id="title">Menú</h1>
<p id="note">Hoy hay oferta.</p>
<ul id="menu">
<li>Bocadillo</li>
<li>Zumo</li>
</ul>
Cambiar el estilo
Cada elemento tiene un objeto style. Dentro hay una propiedad por cada propiedad de CSS.
Un nombre con guion, como background-color, se escribe sin guion y con mayúscula: backgroundColor. Eso se llama camelCase.
Pruébalo: color y tamaño
<h1 id="title">Menú</h1>
<p id="note">Hoy hay oferta.</p>
<ul id="menu">
<li>Bocadillo</li>
<li>Zumo</li>
</ul>
Ejemplo resuelto: de CSS a JavaScript
| En CSS | En JavaScript | Valor de ejemplo |
|---|---|---|
| color | style.color | 'red' |
| background-color | style.backgroundColor | 'gold' |
| font-size | style.fontSize | '24px' |
| border-radius | style.borderRadius | '8px' |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido: texto y estilo
Inténtalo
Repaso rápido: texto y estilo
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Cambiar con clases
Poner diez estilos a mano es largo. Es mejor escribir la clase en CSS y ponérsela al elemento.
classList.add pone una clase. classList.remove la quita. En CSS decides cómo se ve; en JavaScript decides cuándo.