3.4 KiB

Raw Blame History

title

challengeType

forumTopicId

required

dashedName

bad87fee1348bd9aed908826

Cambiare il CSS di un elemento usando jQuery

16776

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

change-the-css-of-an-element-using-jquery

--description--

Possiamo anche cambiare direttamente il CSS di un elemento HTML con jQuery.

jQuery ha una funzione chiamata .css() che consente di cambiare il CSS di un elemento.

Ecco come potremmo cambiare il suo colore in blu:

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

Questo è leggermente diverso da una normale dichiarazione CSS, perché la proprietà CSS e il suo valore sono tra virgolette e separati da una virgola invece che dai due punti.

Elimina i tuoi selettori jQuery, lasciando una document ready function vuota.

Seleziona target1 e cambia il suo colore in rosso.

--hints--

Il tuo elemento target1 dovrebbe avere un testo rosso.

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

Dovresti usare solo jQuery per aggiungere queste classi all'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>

3.4 KiB Raw Blame History