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

id	title	localeTitle	required	challengeType
bad87fee1348bd9aed908826	Change the CSS of an Element Using jQuery	Cambia el CSS de un elemento usando jQuery	link https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css	6

Description

También podemos cambiar el CSS de un elemento HTML directamente con jQuery. jQuery tiene una función llamada .css() que le 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 se separan con una coma en lugar de dos puntos. Borre sus selectores jQuery, dejando una document ready function vacío document ready function . Selecciona target1 y cambia su color a rojo.

Instructions

Tests

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.");'

Challenge Seed

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

Solution

// solution required