Cómo diseñar elementos HTML en jQuery

Las propiedades de estilo para elementos HTML seleccionados se asignan o devuelven el jQuery CSS () método. Cuando se utiliza como una función Getter, devuelve el valor de propiedad del primer elemento HTML coincidente. También puede usarlo para establecer propiedades CSS simples o múltiples de todos los elementos coincidentes.

Este artículo discutirá el procedimiento para Elementos HTML de estilo en jQuery. También demostraremos algunos ejemplos apropiados relacionados con el método CSS (). Entonces, comencemos!

Cómo obtener la propiedad CSS de los elementos HTML en jQuery

En jQuery, puede obtener la propiedad CSS especificada de los elementos HTML pasando el "nombre de la propiedad"Como argumento en el método css (). Para hacerlo, debes seguir la sintaxis dada por debajo:

$ (selector).CSS ("Propertyname");

Puedes agregar un jQuery "selector"Para seleccionar los elementos HTML, y el método CSS () se utiliza para recuperar los valores de la propiedad pasada.

Ejemplo: Obtener propiedad CSS de elementos HTML en jQuery
En nuestro "índice.html", Hemos agregado un botón y tres párrafos elementos y establecemos sus"color de fondo"Valor de propiedad CSS:

Este es el primer párrafo.

Este es el segundo párrafo.

Este es el tercer párrafo.

Verifique los antecedentes

A continuación, en nuestro archivo JavaScript, que se llama "mi proyecto.js", Escribiremos el siguiente código:

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
alerta ("Color de fondo =" + $ ("P").CSS ("Color de fondo"));
);
);

Cuando el usuario hace clic en el "Verifique los antecedentes"Botón, JQuery buscará el"pag"O párrafos y obtenga el"color de fondo"Propiedad CSS del primer elemento coincidente. Al final, se mostrará un cuadro de alerta en el navegador que comprende el valor de la propiedad de "color de fondo":

Después de agregar el código en nuestro "índice.html", Lo ejecutaremos usando el"Servidor hepático"VS Extensión del código:

Haciendo clic en el "Verifique los antecedentesEl botón le informará sobre la propiedad CSS de color de fondo del primer párrafo en un cuadro de alerta:

Cómo establecer la propiedad CSS de los elementos HTML en jQuery

El método jQuery CSS () también le permite establecer las propiedades CSS de los elementos HTML. Si desea cambiar los valores de propiedad de un elemento HTML, luego pase el "nombre de la propiedad" y "valor"Como argumentos al método CSS (). Ambos argumentos deben estar separados por coma:

$ (selector).CSS ("Propertyname", "valor");

Ejemplo: Establecimiento de propiedades CSS de elementos HTML en jQuery
En este ejemplo, estableceremos el "color de fondo"Propiedad CSS de todos los elementos del párrafo:

Este es un encabezado

Este es el primer párrafo.

Este es el segundo párrafo.

Este es el tercer párrafo.

Este es un párrafo.

Establecer el color de fondo de P

Cuando el usuario haga clic en el botón proporcionado, establecerá el color de fondo de cada elemento de párrafo en "amarillo":

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("P").CSS ("Color de fondo", "Amarillo");
);
);

Puede ver desde la salida dada a continuación que el "color de fondo"El valor de la propiedad CSS de los elementos del párrafo ahora se cambia a"amarillo":

Cómo establecer múltiples propiedades CSS de elementos HTML en jQuery

Para establecer múltiples propiedades CSS de elementos HTML con el método CSS (), debe seguir la sintaxis dada a continuación:

CSS ("Propertyname": "valor", "PropertyName": "valor", ...);

Aquí, debe escribir las propiedades y sus valores en un formato de objeto de valor clave, separado por comas.

Ejemplo: establecer múltiples propiedades CSS de elementos HTML en jQuery
En este ejemplo, cambiaremos el "color de fondo" y "tamaño de fuente"Para todos los elementos de párrafo adicional:

Este es un encabezado

Este es el primer párrafo.

Este es el segundo párrafo.

Este es el tercer párrafo.

Este es un párrafo.

Establecer múltiples propiedades CSS

En "botón"Haga clic en el evento, jQuery seleccionará el elemento párrafos y establece su color de fondo en"amarillo"Y del tamaño de una fuente para"150%":

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("P").CSS ("Color de fondo": "Amarillo", "Font-Size": "150%");
);
);

La salida dada anterior significa que hemos establecido correctamente las múltiples propiedades CSS especificadas de los elementos HTML seleccionados.

Conclusión

El método jQuery CSS () se utiliza para el estilo o el cambio de las propiedades CSS de los elementos HTML seleccionados. Se puede usar de varias maneras, desde obtener el valor de la propiedad CSS hasta establecer propiedades HTML individuales y múltiples. Este artículo sobre el procedimiento para diseñar elementos HTML en jQuery, y también hemos demostrado algunos ejemplos apropiados relacionados con el método CSS ().