Modificar atributo style de una etiqueta


¿Necesitas modificar el atributo style dentro de una etiqueta html?
Esto fácilmente se puede hacer desde JavaScript con el método setAttribute(), pero este nos sobreescribe todo el atributo; si solo quieres modificar una propiedad dentro de ese atributo, esta es la solución que yo propongo.

Para poner un ejemplo, digamos que tienes una etiqueta html como esta:
<div id="div1" style="margin:0 auto 0 auto; padding-bottom:10px; border: 2px solid #000;">

Después de una llamada a la función modEstilo(), como la siguiente:
modEstilo('div1','margin','3px 40px');

La etiqueta div queda así:
<div id="div1" style="margin: 3px 40px; padding-bottom:10px; border: 2px solid #000;">

Sigue leyendo para encontrar la referencia completa a la función y el código de esta.


Definición y uso

La función modEstilo() modifica los valores del atributo style de una etiqueta html, regresa un valor del tipo boolean indicando si la modificación se realizó con éxito o no.

Sintaxis
modEstilo(elementoId,propiedad,valor);

ParámetroDescripción
elementoIdRequerido. Una cadena, debe ser igual al ID de la etiqueta que queremos modificar
propiedad Requerido. Una cadena, la propiedad que queremos modificar dentro del atributo style
valor Requerido. Una cadena, el valor que queremos asignarle a la propiedad dentro de style

Compatibilidad


Extras
Nota: Si el atributo style no existe en la etiqueta que deseamos modificar, es creado con valor inicial de "".
Nota: Si la propiedad que deseas modificar no existe en el atributo style, la función la añade con el valor pasado a la función.

Descarga

Ya, ya ahora si, aquí está el link de la descarga: func.js




Prueba su funcionamiento

Modifica el estilo del siguiente div

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. Ius id vidit volumus mandamus.

Atributo: Valor:



¡Cuidado con los posibles bugs(LOL)!

¡Saludos! @fferegrino :)

No comments:

Post a Comment

¡Hey, gracias por tu comentario! No seas anónimo, inicia sesión para que te responda más fácilmente.