Quiero reemplazar el contenido div con una cita de texto aleatorio (estoy codificando una extensión web de Chrome) que hace el siguiente código; pero no sé cómo usar javascript para manipular el texto para poder centrarlo, agrandar el texto, bajar el texto unas pocas líneas, etc. Como no tengo acceso al HTML original (esto es para un Chrome Extension), necesito lograr esto con javascript. es posible?
const quotes = [ 'Quotation 0.', 'Quotation 1.', 'Quotation 2.' ]; index = Math.floor(Math.random() * quotes.length); document.getElementById('pageContent').outerHTML = quotes[index];
js no provoca la representación del texto, el navegador interpreta el html y css para representar el texto. Puede usar js para inyectar html y css para obtener el efecto deseado. Si no puede editar directamente el documento html o css, puede usar estilos en línea para crear efectos visuales, sin embargo, la extensión de Chrome tiene la capacidad de inyectar css y js.
¿Qué tal algo como la modificación del código que proporcionó:
const quotes = [ 'Quotation 0.', 'Quotation 1.', 'Quotation 2.' ]; const index = Math.floor(Math.random() * quotes.length); const h2 = document.createElement("h2"); h2.style.cssText = ` text-align: center; font-size: 3rem; margin: 1rem; `; h2.innerText = quotes[index]; document.getElementById('pageContent').appendChild(h2);
Esta es realmente una pregunta de hojas de estilo en cascada (CSS).
Puedes usar CSS
text-align: "center" font-size: "130%"
También le aconsejo que busque qué otras configuraciones puede tener el tamaño de fuente (frente al porcentaje). Es mejor si puede aplicar estos estilos en una hoja de estilo CSS. Pero si quieres hacerlo en JavaScript, puedes hacerlo
myElement.style.textAlign = "center"; myElement.style.fontSize = "130%"