freeCodeCamp/curriculum/challenges/espanol/03-front-end-development-libraries/jquery/change-the-css-of-an-element-using-jquery.md

id, title, challengeType, forumTopicId, required, dashedName

id	title	challengeType	forumTopicId	required	dashedName
bad87fee1348bd9aed908826	Cambia el CSS de un elemento usando jQuery	6	16776	link https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css	change-the-css-of-an-element-using-jquery

--description--

Podemos cambiar también el CSS de un elemento HTML directamente con jQuery.

jQuery tiene una función llamada .css() que te permite cambiar el CSS de un elemento.

Así es como cambiaríamos su color a azul:

$("#target1").css("color", "blue");

Esto es ligeramente diferente de 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.

Elimina tus selectores de jQuery, dejando document ready function vacía.

Selecciona target1 y cambia su color a rojo.

--hints--

Tu elemento target1 debe tener texto rojo.

assert($('#target1').css('color') === 'rgb(255, 0, 0)');

Debes usar solo jQuery para añadir estas clases al elemento.

assert(!code.match(/class.*animated/g));

--seed--

--seed-contents--

<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--

<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>