{"id":15206,"date":"2023-08-11T13:00:00","date_gmt":"2023-08-11T11:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=15206"},"modified":"2023-11-13T11:49:21","modified_gmt":"2023-11-13T10:49:21","slug":"agregar-estilo-con-javascript","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/agregar-estilo-con-javascript\/","title":{"rendered":"C\u00f3mo agregar estilo a tu web con JavaScript"},"content":{"rendered":"\n

En ocasiones nos encontramos con la necesidad de agregar estilo con JavaScript<\/strong> a un sitio web, en vez de emplear CSS (que ser\u00eda lo normal). En este art\u00edculo te muestro todo lo que debes saber sobre la tem\u00e1tica, de forma que puedas manipular todos los estilos de tu sitio web empleando JS.<\/p>\n\n\n\n

\u00a1Vamos con ello!<\/p>\n\n\n\n

Introducci\u00f3n<\/h2>\n\n\n\n
\n
\n

JavaScript juega un papel fundamental en el \u00e1mbito del dise\u00f1o web<\/a>. No solo sirve para a\u00f1adir interactividad y funcionalidad a una p\u00e1gina, sino que tambi\u00e9n brinda la capacidad de potenciar la experiencia visual y est\u00e9tica del sitio web.<\/p>\n\n\n\n

Es importante comprender que JavaScript es un lenguaje que permite acceder y manipular el Document Object Model (DOM)<\/a><\/strong>, la representaci\u00f3n estructurada de una p\u00e1gina web. Es decir, hace posible interactuar con cada elemento HTML de la p\u00e1gina y modificar su estilo en tiempo real. Con JavaScript, puedes cambiar colores, tama\u00f1os, posiciones y cualquier otra propiedad CSS.<\/p>\n<\/div>\n\n\n\n

\n
\"manipular<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Manipulaci\u00f3n del DOM con JavaScript<\/h2>\n\n\n\n

Acceder y manipular elementos del DOM<\/strong> con JavaScript es una tarea muy \u00fatil en cualquier trabajo de desarrollo web. En este caso, te voy a mostrar c\u00f3mo modificar atributos y estilos en tiempo real.<\/p>\n\n\n\n

Para acceder a elementos HTML desde JavaScript, puedes utilizar m\u00e9todos como getElementById<\/code>, getElementsByClassName<\/code> o querySelector<\/code>, que permiten seleccionar<\/strong> elementos<\/strong> seg\u00fan su identificador, clase o selector CSS<\/a>, respectivamente. Una vez que hayas seleccionado un elemento, podr\u00e1s utilizar propiedades y m\u00e9todos para acceder a sus atributos, contenido y estilo<\/strong>.<\/p>\n\n\n\n

Puedes utilizar propiedades como innerHTML<\/code> para cambiar el contenido de un elemento, setAttribute<\/code> para establecer o modificar atributos y style<\/code> para manipular directamente los estilos CSS de un elemento. A continuaci\u00f3n te muestro algunos ejemplos. Para ello, en primer lugar, te muestro el c\u00f3digo HTML que tomaremos como base<\/strong> para manipularlo posteriormente con JavaScript:<\/p>\n\n\n\n

\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Agregar estilo a tu web con JavaScript<\/title>\n<\/head>\n<body>\n    <h1 id=\"miEncabezado\">C\u00f3mo agregar estilo a tu web con JavaScript<\/h1>\n    <p id=\"miParrafo\">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste temporibus nemo exercitationem\n        assumenda blanditiis quos, quod aspernatur qui? Optio veritatis laudantium est ex natus vero suscipit odit\n        similique aspernatur nemo.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"como
Resultado del c\u00f3digo HTML<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Como ves, el c\u00f3digo HTML anterior simplemente define un encabezado y un p\u00e1rrafo. No se definen estilos, por lo que adquiere los definidos por defecto por Google Chrome. Puedes copiarlo en un archivo con extensi\u00f3n.html y abrirlo en tu navegador web preferido.<\/p>\n\n\n\n
Agregar estilo CSS con JavaScript<\/h3>\n\n\n\n
En el siguiente ejemplo se a\u00f1ade un script al c\u00f3digo HTML anterior que sirve para modificar los estilos del encabezado y el p\u00e1rrafo<\/strong>:<\/p>\n\n\n\n
\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Agregar estilo a tu web con JavaScript<\/title>\n<\/head>\n<body>\n    <h1 id=\"miEncabezado\">C\u00f3mo agregar estilo a tu web con JavaScript<\/h1>\n    <p id=\"miParrafo\">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste temporibus nemo exercitationem\n        assumenda blanditiis quos, quod aspernatur qui? Optio veritatis laudantium est ex natus vero suscipit odit\n        similique aspernatur nemo.<\/p>\n    <script>\n        \/\/ Acceder a los elementos por su ID\n        const miEncabezado = document.getElementById('miEncabezado');\n        const miParrafo = document.getElementById('miParrafo');\n        \/\/ Modificar estilos\n        miEncabezado.style.fontFamily = 'Arial';\n        miEncabezado.style.fontSize = '2rem';\n        miEncabezado.style.backgroundColor = '#F6FFAC';\n        miParrafo.style.fontFamily = 'Arial';\n        miParrafo.style.fontStyle = 'italic';\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"como
Resultado del c\u00f3digo JavaScript a\u00f1adido documento HTML<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Como se puede observar, hemos modificado las propiedades fontFamily<\/code>, fontSize<\/code>, backgroundColor<\/code>, fontFamily<\/code> y fontStyle<\/code>. T\u00fa puedes modificar todas las propiedades CSS que quieras. Puedes encontrar el listado completo en W3Schools<\/a>.<\/p>\n\n\n\n
Modificar atributos HTML con JavaScript<\/h3>\n\n\n\n
En el siguiente ejemplo, adem\u00e1s de agregar estilos con JavaScript, trabajamos con el acceso y modificaci\u00f3n de atributos de elementos del DOM<\/strong>. De esta forma, conseguimos que la etiqueta de imagen contenga una ruta y un texto ALT:<\/p>\n\n\n\n
\n
\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Agregar estilo a tu web con JavaScript<\/title>\n<\/head>\n<body>\n    <h1 id=\"miEncabezado\">C\u00f3mo modificar atributos con JavaScript<\/h1>\n    <img src=\"\" alt=\"\" id=\"miImagen\">\n    <script>\n        \/\/ Acceder a los elementos por su ID\n        const miDocumento = document.getElementsByTagName('body')[0];\n        const miEncabezado = document.getElementById('miEncabezado');\n        const miImagen = document.getElementById('miImagen');\n        \/\/ Modificar estilos\n        miDocumento.style.textAlign = \"center\";\n        miEncabezado.style.fontFamily = 'Arial';\n        miEncabezado.style.fontSize = '2rem';\n        miEncabezado.style.backgroundColor = '#F6FFAC';\n        miImagen.setAttribute('src', 'https:\/\/carontestudio.com\/img\/caronte-web-estudio-logo.png');\n        miImagen.setAttribute('alt', 'Logo Caronte Web Studio');\n        miImagen.style.maxWidth = '15rem';\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<\/div>\n\n\n\n
\n
\"agregar
Resultado del c\u00f3digo JavaScript a\u00f1adido documento HTML<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
Agregar estilo con JavaScript para crear animaciones<\/h2>\n\n\n\n
Agregar animaciones y efectos de transici\u00f3n a una p\u00e1gina web puede marcar la diferencia en t\u00e9rminos de experiencia del usuario y atractivo visual. En este sentido, puedes hacer uso de distintas funciones de JavaScript para modificar gradualmente los estilos de un elemento a lo largo del tiempo<\/strong>, creando animaciones. <\/p>\n\n\n\n
Para ello, existen los m\u00e9todos setInterval<\/code> o requestAnimationFrame<\/code>, los cuales permiten ejecutar una serie de cambios de estilo en intervalos regulares. Al actualizar continuamente los estilos de un elemento, puedes crear la ilusi\u00f3n de movimiento y animaci\u00f3n.<\/p>\n\n\n\n
A continuaci\u00f3n te muestro un ejemplo en el que se declara un bot\u00f3n y, a trav\u00e9s de JavaScript, se agregan estilos al mismo de forma gradual<\/strong>, creado un efecto visual en el que el bot\u00f3n se desplaza de izquierda a derecha:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Agregar estilo a tu web con JavaScript<\/title>\n<\/head>\n<body>\n    <h1 id=\"miEncabezado\">C\u00f3mo modificar atributos con JavaScript<\/h1>\n    <p id=\"miParrafo\">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste temporibus nemo exercitationem\n        assumenda blanditiis quos, quod aspernatur qui? Optio veritatis laudantium est ex natus vero suscipit odit\n        similique aspernatur nemo.<\/p>\n    <button id=\"miBoton\">Bot\u00f3n<\/button>\n    <script>\n        \/\/ Acceder a los elementos por su ID\n        const miDocumento = document.getElementsByTagName('body')[0];\n        const miBoton = document.getElementById('miBoton');\n        \/\/ Modificar estilos\n        miDocumento.style.textAlign = \"center\";\n        miDocumento.style.backgroundColor = \"#0B1428\";\n        miDocumento.style.color = \"#fff\";\n        miDocumento.style.fontFamily = \"Arial\";\n        \/\/Animar bot\u00f3n\n        let posicion = 0;\n        let velocidad = 2;\n        function animarElemento() {\n            posicion += velocidad;\n            miBoton.style.transform = `translateX(${posicion}px)`;\n            if (posicion >= 200) {\n                velocidad = -2;\n            } else if (posicion <= 0) {\n                velocidad = 2;\n            }\n            requestAnimationFrame(animarElemento);\n        }\n        animarElemento();\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\n
\n
\"modificar
Posici\u00f3n del bot\u00f3n en un momento A<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"modificar
Posici\u00f3n del bot\u00f3n en un momento B<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
En el ejemplo anterior, la funci\u00f3n \u00abanimarElemento\u00bb se ejecuta continuamente utilizando el m\u00e9todo requestAnimationFrame<\/code>. Dentro de esta funci\u00f3n, se actualiza la posici\u00f3n del elemento (\u00abposicion\u00bb) en cada fotograma de animaci\u00f3n y se desplaza el elemento horizontalmente gracias a la propiedad transform<\/code> y la funci\u00f3n translateX<\/code>.<\/p>\n\n\n\n
Adem\u00e1s, se verifica si el elemento ha alcanzado los l\u00edmites de movimiento. En caso afirmativo, se invierte la direcci\u00f3n de movimiento cambiando el valor de \u00abvelocidad\u00bb. Al llamar a \u00abanimarElemento\u00bb al final del c\u00f3digo, se inicia la animaci\u00f3n y el elemento se mueve de manera continua de un lado a otro.<\/p>\n\n\n\n
Recuerda ajustar los valores de velocidad, posici\u00f3n y el selector del elemento<\/strong> (getElementById('mi-elemento')<\/code>) seg\u00fan tus necesidades y la estructura de tu p\u00e1gina. Te animo a experimentar con este c\u00f3digo y personalizarlo para crear tus propias animaciones.<\/p>\n\n\n\n
Interacciones din\u00e1micas con JavaScript<\/h2>\n\n\n\n
\n
\n
JavaScript permite cambiar el estilo de los elementos en respuesta a la interacci\u00f3n del usuario. En este sentido, puedes emplear el m\u00e9todo addEventListener<\/code> para escuchar eventos como clics de rat\u00f3n, movimientos, cambios de teclado<\/strong>, entre otros. Al capturar estos eventos, puedes ejecutar c\u00f3digo JavaScript espec\u00edfico que responda a la interacci\u00f3n del usuario.<\/p>\n\n\n\n
Un ejemplo com\u00fan de interacci\u00f3n din\u00e1mica es cambiar los estilos de un elemento en respuesta a un evento. Por ejemplo, al hacer clic en un bot\u00f3n, puedes cambiar el color de fondo, el tama\u00f1o de fuente o cualquier otro atributo de estilo de cualquier elemento.<\/p>\n\n\n\n
Si quieres un ejemplo completo de este tipo de c\u00f3digo<\/strong>, te recomiendo visitar el siguiente art\u00edculo, donde te explico c\u00f3mo modificar el estilo de una p\u00e1gina de oscuro a claro (y viceversa) con un bot\u00f3n:<\/p>\n<\/div>\n\n\n\n
\n
\n
C\u00f3mo a\u00f1adir un tema oscuro con CSS y JavaScript<\/a><\/blockquote>