Mientras trabaja en la parte frontal de su proyecto, CSS juega un papel importante en la definición de los estilos para su página web.
Con la ayuda del conocimiento en DOM (Document Object Model) y JavaScript , es posible cambiar los estilos de su página web utilizando archivos de script. En este artículo, discutiremos la precedencia de JavaScript con respecto a CSS en términos de diseño del sitio web.
Ejemplo: Consideremos un ejemplo de archivo index.html , que contendrá el código HTML de nuestra página web.
index.html
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Precedence example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 id="mainh1">This is an example heading</h1> <script src="index.js" charset="utf-8"></script> </body> </html>
En lo anterior, hemos hecho referencia a dos archivos externos. Vamos a repasarlos uno por uno.
Código CSS: el enlace de la hoja de estilo proporcionado en la sección principal del código HTML hace referencia al archivo «styles.css» presente en el directorio actual. Definamos el archivo CSS de la siguiente manera:
#mainh1
{
color: red;
}
El archivo CSS tiene como objetivo los elementos que tienen una identificación como » mainh1 «. Claramente, si ve en el ejemplo dado, nuestro archivo HTML contiene solo un elemento que es un encabezado h1 , con esta identificación. El archivo CSS intenta cambiar el color del texto del encabezado a rojo. Si solo se aplica el estilo CSS a la página web, obtendremos el siguiente resultado:
Producción:
Ahora, definamos el archivo index.js , al que se hace referencia en la etiqueta del script justo antes de la etiqueta </body>. El archivo JavaScript se define como
Código JavaScript:
index.js
document.getElementById("mainh1").style.color = "blue";
Este archivo JavaScript primero obtiene el elemento que tiene una identificación como » mainh1 » y luego usa la propiedad de estilo para cambiar el color del texto. Observe que el color es azul. Cuando ambos se usan simultáneamente, obtenemos el siguiente resultado.
Producción:
Este ejemplo indica claramente que cuando tanto CSS como JavaScript apuntan al mismo elemento, los cambios de JavaScript se aplican sobre CSS. Por lo tanto, JavaScript tiene mayor prioridad que CSS .
Publicación traducida automáticamente
Artículo escrito por greenblade29 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA