2018-10-08 17:34:43 +00:00
---
id: bad87fee1348bd9aed908826
title: Change the CSS of an Element Using jQuery
required:
- link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
challengeType: 6
2018-10-10 20:20:40 +00:00
videoUrl: ''
localeTitle: Cambia el CSS de un elemento usando jQuery
2018-10-08 17:34:43 +00:00
---
## Description
2018-10-10 20:20:40 +00:00
< section id = "description" > También podemos cambiar el CSS de un elemento HTML directamente con jQuery. jQuery tiene una función llamada < code > .css()< / code > que te permite cambiar el CSS de un elemento. Así es como cambiaríamos su color a azul: < code > $(" #target1" ).css(" color" , " blue" );< / code > Esto es ligeramente diferente de una declaración CSS normal, porque la propiedad CSS y su valor están entre comillas y se separan con una coma en lugar de dos puntos. Borre sus selectores de jQuery, dejando una < code > document ready function< / code > vacío < code > document ready function< / code > . Seleccione < code > target1< / code > y cambie su color a rojo. < / section >
2018-10-08 17:34:43 +00:00
## Instructions
2018-10-10 20:20:40 +00:00
< section id = "instructions" >
2018-10-08 17:34:43 +00:00
< / section >
## Tests
< section id = 'tests' >
```yml
tests:
- text: Su elemento < code > target1</ code > debe tener texto rojo.
testString: 'assert($("#target1").css("color") === "rgb(255, 0, 0)", "Your < code > target1< / code > element should have red text.");'
- text: Solo use jQuery para agregar estas clases al elemento.
testString: 'assert(!code.match(/class.*animated/g), "Only use jQuery to add these classes to the element.");'
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```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 >
2018-10-10 20:20:40 +00:00
2018-10-08 17:34:43 +00:00
```
< / div >
< / section >
## Solution
< section id = 'solution' >
```js
// solution required
```
< / section >