freeCodeCamp

2.7 KiB

Raw Blame History

title

required

challengeType

videoUrl

localeTitle

bad87fee1348bd9aed908826

Change the CSS of an Element Using jQuery

link
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css

Cambia el CSS de un elemento usando jQuery

Description

También podemos cambiar 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 se separan con una coma en lugar de dos puntos. Borre sus selectores de jQuery, dejando una document ready function vacío document ready function . Seleccione target1 y cambie 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

2.7 KiB Raw Blame History