En este artículo, configuraremos el CSS de un elemento div usando jQuery. Usaremos la propiedad CSS para establecer el CSS.
Enfoque: Crearemos un elemento div con algo de texto e hipervínculos. Luego usaremos jQuery para aplicar CSS al elemento div. jQuery viene con la función .css() donde podemos obtener y configurar CSS de cualquier elemento. Lo usaremos para el elemento div.
Sintaxis:
<script>
$("div").css("css-property","value");
</script>
Ejemplo 1: Uso de un CSS simple
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width" />
<!-- Include jQuery file using CDN link-->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<!-- Our Body Content-->
<div id="links">
<h1>Welcome to GeeksforGeeks</h1>
<a href=
"https://www.geeksforgeeks.org/data-structures">
Data structures
</a>
<a href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms">
Algorithms
</a>
</div>
<!-- Using script inline to apply CSS-->
<script>
// Changing text color to green
// and aligning to center
$("div").css("color", "green");
$("div").css("text-align", "center");
</script>
</body>
</html>
Producción:
Ejemplo 2: Uso del efecto de desplazamiento sobre el elemento
Usaremos la función de desplazamiento de jQuery que toma dos funciones. la sintaxis es
$(element).hover(
function(){
// CSS during hover
},
function(){
// CSS when not hovering
},
);
Aquí está el código de ejemplo.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width" />
<!-- Include jQuery file using CDN link-->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<!-- Our Body Content-->
<div id="links">
<h1>Welcome to GeeksforGeeks</h1>
<a href=
"https://www.geeksforgeeks.org/data-structures">
Data structures
</a>
<a href=
"https://www.geeksforgeeks.org/fundamentals-of-algorithms">
Algorithms
</a>
</div>
<!-- Using script inline to apply CSS-->
<script>
// Changing text color to green
// and aligning to center
$("div").css("color", "green");
$("div").css("text-align", "center");
// Using hover function
$("h1").hover(
// First function is for during hover
function () {
$(this).css("font-size", 32);
},
// Second function is for before
// or after hover
function () {
$(this).css("font-size", 24);
$(this).css("transition-duration", "1s");
}
);
</script>
</body>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA