Dado un documento HTML y la tarea es cambiar las propiedades de estilo (Propiedades CSS) de un elemento dinámicamente con la ayuda de JavaScript.
Acercarse:
- Seleccione el elemento cuyas propiedades de estilo deben cambiarse.
- Use la propiedad element.style para establecer el atributo de estilo de un elemento.
- Establezca las propiedades utilizando la notación de corchetes o la notación de guiones .
Ejemplo 1: este ejemplo cambia el color y el color de fondo del elemento de encabezado.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change style attribute of an element
dynamically using JavaScript ?
</title>
</head>
<body style = "text-align:center;" id = "body">
<h1 id = "h1" style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"font-size: 23px; font-weight: bold; color: green; ">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var heading = document.getElementById("h1");
el_up.innerHTML = "Click on the button to "
+ "change the style attribute";
function gfg_Run() {
heading.style["background-color"] = "green";
heading.style["color"] = "white";
el_down.innerHTML = "Style Attribute Changed";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo cambia el color, el color de fondo y la propiedad de ancho de los elementos.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change style attribute of an element
dynamically using JavaScript ?
</title>
</head>
<body>
<center>
<h1 id = "h1" style = "color:green;" >
GeeksforGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"font-size: 23px; font-weight: bold; color: green; ">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var heading = document.getElementById("h1");
el_up.innerHTML = "Click on the button to "
+ "change the style attribute";
function gfg_Run() {
heading.style["color"] = "white";
heading.style["background-color"] = "green";
heading.style["width"] = "300px";
heading.style["border"] = "1px solid black";
el_up.style["background-color"] = "green";
el_up.style["width"] = "400px";
el_up.style["border"] = "1px solid black";
el_down.innerHTML = "Style Attribute Changed";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA