Ejemplos de javascript cambiar propiedad css

Ejemplos de javascript cambiar propiedad css

Ejemplos de javascript cambiar propiedad css

en el siguiente código te muestro cómo cambiar propiedad css con JavaScript

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hola Cybernauta!</p>
<p id="p2">Hola Cybernauta!</p> 
<script> 
document.getElementById("p2").style.color = "blue"; 
document.getElementById("p2").style.fontFamily = "Arial"; 
document.getElementById("p2").style.fontSize = "larger"; 
</script> 
<p>El parrafo 2 es cambiado por javascript y sus propiedades CSS.</p> 
</body> 
</html>

como puedes ver en el ejemplo, después del Body tenemos definidos dos párrafos identificados como P1 y P2, y en la programación de Java Script hemos alterado el aspecto del párrafo P2 modificando su color, la tipografía y el tamaño del texto.

Lo importante es que veas que hemos utilizado el método getElementById()  de JavaScript para poder modificar solo el aspecto del elemento que me interesa

En el siguiente ejemplo demuestro cómo puedes cambiar el aspecto de un párrafo cuando se pulsa o se hace clic en un botón.

Si te fijas hemos utilizado el evento onclick y utilizando la misma función de JavaScript getElementById()  y pasando como parámetro el elemento que quieras cambiar, en este caso P1 , podemos cambiar cualquier propiedad CSS

<!DOCTYPE html>
<html>
<body>

<h1 id="p1">Hola Cybernauta</h1>

<button type="button"
onclick="document.getElementById('p1').style.color = 'red'">
Pulsame!</button>

</body>
</html>