Dado un documento HTML y la tarea es cambiar el color de fondo del documento usando JavaScript y jQuery.
Enfoque 1: este enfoque utiliza JavaScript para cambiar el color de fondo después de hacer clic en el botón.
Use la propiedad HTML DOM Style backgroundColor para cambiar el color de fondo después de hacer clic en el botón. Esta propiedad se utiliza para establecer el color de fondo de un elemento.
Ejemplo: este ejemplo cambia el color de fondo con la ayuda de JavaScript .
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change the background color
after clicking the button ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 16px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
Click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var str = "Click on button to change the background color";
el_up.innerHTML = str;
function changeColor(color) {
document.body.style.background = color;
}
function gfg_Run() {
changeColor('yellow');
el_down.innerHTML = "Background Color changed";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2: este enfoque usa jQuery para cambiar el color de fondo después de hacer clic en el botón.
- El método text() se usa para establecer el contenido del texto en el elemento seleccionado.
- El método on() se utiliza como controlador de eventos para los elementos seleccionados y los elementos secundarios.
- El método css() se usa para cambiar/establecer el color de fondo del elemento.
Ejemplo: este ejemplo cambia el color de fondo con la ayuda de JQuery .
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change the background color after
clicking the button in jQuery ?
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 16px; font-weight: bold;">
</p>
<button>
Click here
</button>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
$('#GFG_UP').text("Click on button to change the background color");
$('button').on('click', function() {
$('body').css('background', '#ccc');
$('#GFG_DOWN').text("Background Color Changed!");
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA