2021-02-06 04:42:36 +00:00
---
id: bad87fee1348bd9aed908826
2021-04-08 05:42:06 +00:00
title: Cambia el CSS de un elemento usando jQuery
2021-02-06 04:42:36 +00:00
challengeType: 6
forumTopicId: 16776
required:
-
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
dashedName: change-the-css-of-an-element-using-jquery
---
# --description--
2021-09-07 14:47:37 +00:00
También podemos cambiar el CSS de un elemento HTML utilizando directamente jQuery.
2021-02-06 04:42:36 +00:00
2021-04-08 05:42:06 +00:00
jQuery tiene una función llamada `.css()` que te permite cambiar el CSS de un elemento.
2021-02-06 04:42:36 +00:00
2021-04-08 05:42:06 +00:00
Así es como cambiaríamos su color a azul:
2021-02-06 04:42:36 +00:00
2021-04-08 05:42:06 +00:00
```js
$("#target1").css("color", "blue");
```
2021-02-06 04:42:36 +00:00
2021-09-07 14:47:37 +00:00
Esto es ligeramente diferente a una declaración CSS normal, porque la propiedad CSS y su valor están entre comillas y separados con coma en lugar de con dos puntos.
2021-02-06 04:42:36 +00:00
2021-09-07 14:47:37 +00:00
Elimina tus selectores de jQuery, dejando `document ready function` vacío.
2021-02-06 04:42:36 +00:00
2021-04-08 05:42:06 +00:00
Selecciona `target1` y cambia su color a rojo.
2021-02-06 04:42:36 +00:00
# --hints--
2021-04-08 05:42:06 +00:00
Tu elemento `target1` debe tener texto rojo.
2021-02-06 04:42:36 +00:00
```js
assert($('#target1').css('color') === 'rgb(255, 0, 0)');
```
2021-09-07 14:47:37 +00:00
Solo debes usar jQuery para agregar estas clases al elemento.
2021-02-06 04:42:36 +00:00
```js
assert(!code.match(/class.*animated/g));
```
# --seed--
## --seed-contents--
```html
< script >
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");
$("button").removeClass("btn-default");
});
< / script >
<!-- Only change code above this line -->
< div class = "container-fluid" >
< h3 class = "text-primary text-center" > jQuery Playground< / h3 >
< div class = "row" >
< div class = "col-xs-6" >
< h4 > #left-well< / h4 >
< div class = "well" id = "left-well" >
< button class = "btn btn-default target" id = "target1" > #target1< / button >
< button class = "btn btn-default target" id = "target2" > #target2< / button >
< button class = "btn btn-default target" id = "target3" > #target3< / button >
< / div >
< / div >
< div class = "col-xs-6" >
< h4 > #right-well< / h4 >
< div class = "well" id = "right-well" >
< button class = "btn btn-default target" id = "target4" > #target4< / button >
< button class = "btn btn-default target" id = "target5" > #target5< / button >
< button class = "btn btn-default target" id = "target6" > #target6< / button >
< / div >
< / div >
< / div >
< / div >
```
# --solutions--
```html
< script >
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeOut");
$("button").removeClass("btn-default");
$("#target1").css("color", "red");
});
< / script >
<!-- Only change code above this line -->
< div class = "container-fluid" >
< h3 class = "text-primary text-center" > jQuery Playground< / h3 >
< div class = "row" >
< div class = "col-xs-6" >
< h4 > #left-well< / h4 >
< div class = "well" id = "left-well" >
< button class = "btn btn-default target" id = "target1" > #target1< / button >
< button class = "btn btn-default target" id = "target2" > #target2< / button >
< button class = "btn btn-default target" id = "target3" > #target3< / button >
< / div >
< / div >
< div class = "col-xs-6" >
< h4 > #right-well< / h4 >
< div class = "well" id = "right-well" >
< button class = "btn btn-default target" id = "target4" > #target4< / button >
< button class = "btn btn-default target" id = "target5" > #target5< / button >
< button class = "btn btn-default target" id = "target6" > #target6< / button >
< / div >
< / div >
< / div >
< / div >
```