3.4 KiB
3.4 KiB
id | title | challengeType | forumTopicId | required | dashedName | |||
---|---|---|---|---|---|---|---|---|
bad87fee1348bd9aed908826 | Cambia el CSS de un elemento usando jQuery | 6 | 16776 |
|
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>