¿Quieres mejorar la apariencia y funcionalidad de tu sitio web? Entonces, los métodos de jQuery CSS son lo que necesitas. Con ellos, podrás manipular estilos y elementos HTML de forma sencilla y efectiva. En este artículo, exploraremos algunas de las técnicas más útiles y populares de jQuery CSS para que puedas darle un toque profesional y elegante a tu página web. ¡No te lo pierdas en TIEngranaje!
jQuery proporciona métodos para manipular fácil y efectivamente las propiedades relacionadas con CSS de elementos DOM. Echaremos un vistazo a los métodos más comunes en este artículo.
Métodos
Los métodos enumerados en la siguiente tabla se usan comúnmente para la manipulación de DOM.
| Método | Descripción | Sintaxis |
|---|---|---|
addClass() |
Agrega la(s) clase(s) a los elementos coincidentes. Separar las clases con espacio. | $(selector).addClass(class) |
css() |
Obtiene o establece una o más propiedades de estilo para elementos seleccionados | $(selector).css({property:value})) |
hasClass() |
Determina si alguno de los elementos seleccionados tiene una clase específica | $(selector).hasClass(class) |
height() |
Obtiene o establece la altura de los elementos seleccionados | $(selector).height(value) |
innerHeight() |
Obtiene o establece la altura del elemento seleccionado, incluido el relleno, no el borde | $(selector).innerHeight() |
innerWidth() |
Obtiene o establece la altura de los elementos seleccionados, incluido el relleno, no el borde | $(selector).innerWidth() |
offset() |
Establece o devuelve la posición (en relación con el documento) para los elementos seleccionados | $(selector).offset() |
outerHeight() |
Obtiene o establece la altura del elemento seleccionado, incluido el relleno y el borde | $(selector).outerHeight() |
outerWidth() |
Obtiene o establece la altura de los elementos seleccionados, incluido el relleno y el borde | $(selector).outerWidth() |
position() |
Devuelve la posición relativa al elemento padre, del elemento seleccionado | $(selector).position() |
removeClass() |
Elimina una o más clases de los elementos seleccionados | $(selector).removeClass(class) |
toggleClass() |
Alterna entre agregar/eliminar una o más clases de los elementos seleccionados | $(selector).toggleClass() |
width() |
Establece o devuelve el ancho de los elementos seleccionados | $(selector).width(value) |
Ejemplo HTML
Usaremos el siguiente código HTML para los ejemplos que se enumeran a continuación.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.itgeared.com/jquery-css-methods-tutorial/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// ... jQuery Code ...
});
</script>
</head>
<body>
<img id="img1" src="go.png" /> ;
<div id="div1"> <!-- Some Content --> </div>
</body>
</html>Ejemplos
Haga clic en el botón de imagen para probar los diversos métodos relacionados con CSS a continuación. Para obtener información detallada sobre cada método, puede visitar jQuery.com.
.addClass()
$("#go").click(function () {
$("#div1").addClass("newClass");
});.css()
$("#go").click(function () {
$("#div1").css({"color":"red","font-size":"2em"});
});.hasClass()
$("#go").click(function () {
$("#div1").html($("#div1").hasClass("newClass"));
});.altura(), o .altura(valor)
$("#go").click(function () {
$("#div1").height(96);
});.innerHeight()
$("#go").click(function () {
$("#div1").text("innerHeight: " + $("#div1").innerHeight());
});.innerWidth()
$("#go").click(function () {
$("#div1").text("innerWidth: " + $("#div1").innerWidth());
});.compensar()
$("#go").click(function () {
x=$("#div1").offset();
$("#div1").text("Left: " + x.left + " Top: " + x.top);.alturaexterior()
$("#go").click(function () {
$("#div1").text("outerHeight: " + $("#div1").outerHeight());
});.outerWidth()
$("#go").click(function () {
$("#div1").text("outerWidth: " + $("#div1").outerWidth());
});.posición()
$("#go").click(function () {
x=$("#div1").position();
$("#div1").text("Left: " + x.left + " Top: " + x.top);.removeClass()
$("#go").click(function () {
$("#div1").removeClass("newClass");
});.toggleClass()
$("#go").click(function () {
$("#div1").toggleClass("class1 class2");
});.width() o ancho(valor)
$("#go").click(function () {
$("#div1").width(500);
});