Table of contents
ALM
MVC
TOC
Collapse the table of content
Expand the table of content

Explorando el DOM: Objeto element. Objeto y atributo Style (Inline Styles)

Microsoft Community Publishing Service|Última actualización: 26/05/2017
|
2 Colaboradores

©Jaime Peña Tresancos, 2015

Twitter: @jpt219

LinkedIn

Las propiedades de estilos pueden ser fijadas en el atributo style, dentro de las etiquetas HTML de un elemento dado –los denominados inline styles-. Dinámicamente podremos cambiar su valor, por varios métodos que suponen el acceso mediante JavaScript.

En concreto, en el presente artículo, nos ocuparemos de:

  • Propiedades CSS en JavaScript.

  • El objeto style de JavaScript.

  • Fijar, obtener y eliminar propiedades individuales.

  • La propiedad cssText.

  • Fijar las propiedades de estilo de forma genérica.

Para una aproximación preliminar al tratamiento y conocimiento del esquema y tipos de nodos, consúltese el artículo Explorando el DOM: Tipos de nodos y sus atributos generales:

http://msdn.microsoft.com/es-es/library/dn367218.aspx

Referencias del DOM

Las bases de referencia vienen dadas por el denominado DOM –Document Object Model-. Inicialmente el DOM ha sido definido como una API –Application Programming Interface- para la gestión de documentos XML en general -eXtensible Markup Language, lenguaje de marcas extensible- y posteriormente implementada para documentos HTML en particular.

Para una descripción introductoria del DOM puede acudir a:

http://es.wikipedia.org/wiki/Document_Object_Model

La documentación oficial y más recomendable sobre el DOM se encuentra en el foro del W3C –World Wide Web Consortium- en diversos niveles de conformidad, por ejemplo:

http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html

http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html

Propiedades CSS en JavaScript. El objeto style

El objeto style de JavaScript, nos da acceso a la globalidad de las propiedades del atributo style de CSS –no se confundan ambos términos que, eso sí, refieren y dan acceso a las mismas propiedades-.

Para utilizar las propiedades JavaScript hemos de usar los métodos que se enumeran en el apartado que sigue –del todo simples, por otra parte-.

Del foro MDN –Mozilla Developer Network-, hemos extraído un listado de propiedades utilizables en style de JavaScript. Véase la Tabla 1, obsérvese que se muestran las equivalencias con las propiedades CSS:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

Propiedad CSSPropiedad JavaScript
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
floatstyleFloat
text-aligntextAlign
text-decorationtextDecoration
text-decoration: blinktextDecorationBlink
text-decoration: line-throughtextDecorationLineThrough
text-decoration: nonetextDecorationNone
text-decoration: overlinetextDecorationOverline
text-decoration: underlinetextDecorationUnderline
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex

Tabla 1: Propiedades de estilos CSS y sus equivalentes de JavaScript, utilizables en el objeto style.

Fijar, obtener y eliminar propiedades individuales

Basándonos en lo anteriormente comentado, se trata de asignar valores a las propiedades, o bien obtener su valor consultando la propiedad, según:

MétodoDescripción
elemento.style.propiedad = valorAsignará el valor dado a la propiedad de estilo
valor = elemento.style.propiedadObtendremos el valor de la propiedad de estilo
elemento.style.propiedad=’’Eliminaremos cualquier valor de la propiedad de estilo

Comencemos con lo ilustrado en el Listado 1:

  • Codificaremos tres funciones JavaScript, con las siguientes funcionalidades:

  • set: fija los valores de cada uno de los atributos referenciados en el objeto style, uno de cada vez.

  • get: devuelve el valor de los atributos referenciados en el objeto style, uno de cada vez. Sólo devolverá los fijados mediante el objeto style, no los restantes que hayan sido fijados en la cascada de estilos CSS.

  • remove: elimina –pone a cero- los atributos referenciados en el objeto style, uno de cada vez. Sólo eliminará los fijados mediante el objeto style, no los restantes que hayan sido fijados en la cascada de estilos CSS.

  • Tres botones de comando que llaman a las funciones antes comentadas.

  • Para consultar el valor de las propiedades, al hacer clic sobre el botón get, deberemos acceder a la Herramientas F12 de Internet Explorer y allí ver la consola de texto –pulsando la tecla F12 y seleccionado la opción de la barra de herramientas Consola de texto-.

Listado 1: Fijación, obtención y eliminación de estilos mediante el objeto style de JavaScript.

    <!doctype html>

    <html>

    <head lang="es-es">

    <meta charset="utf-8" />

    <title>Set, Get and Remove CSS Individual
    Properties</title>

    <script>

    //set

    function set() {

    var divStyle = document.getElementById('A').style;

    divStyle.backgroundColor = 'yellow';

    divStyle.border = '4px solid black';

    divStyle.width = '300px';

    divStyle.height = '300px';

    }

    //get

    function get() {

    var divStyle = document.getElementById('A').style;

    console.log("backgroundColor: " + divStyle.backgroundColor);

    console.log("border: " + divStyle.border);

    console.log("width: " + divStyle.width);

    console.log("height: " + divStyle.height);

    }

    //remove

    function remove() {

    var divStyle = document.getElementById('A').style;

    divStyle.backgroundColor = '';

    divStyle.border = '';

    divStyle.width = '';

    divStyle.height = '';

    }

    </script>

    </head>

    <body>

    <div id="A"></div>

    <hr />

    <input type="button" value="set" onclick="set()" />

    <input type="button" value="get" onclick="get()" />

    <input type="button" value="remove" onclick="remove()" />

    </body>

    </html>

La propiedad cssText

Esta propiedad del objeto style, también de tipo cadena de caracteres, nos permite fijar varias propiedades de estilo a la vez, lo mismo que haríamos en el atributo homónimo –para codificación inline CSS- de una etiqueta HTML.

Segú lo usemos podemos fijar, obtener y eliminar estilos, de acuerdo con la sintaxis:

MétodoDescripción
elemento.style.cssText = cadenaAñadirá el contenido dado al estilo
cadena = elemento.style.cssTextObtendremos el valor del estilo asignado
elemento.style.cssText = ’’Eliminaremos cualquier valor de estilo asignado

Muy importante es tener en cuenta que en la cadena se ha de pasar una lista de propiedades CSS válidas, no de propiedades JavaScript, como en el caso anterior –véase la tabla de equivalencias mostrada, Tabla 1-

Un ejemplo podemos verlo en el Listado 2:

  • Codificaremos tres funciones JavaScript, con las siguientes funcionalidades:

  • set: fija los valores de los atributos referenciados en la cadena cssText del objeto style.

  • get: devuelve el valor de los atributos referenciados en la cadena cssText del objeto style. Sólo devolverá los fijados mediante el objeto style, no los restantes que hayan sido fijados en la cascada de estilos CSS.

  • remove: elimina –pone a cero- los atributos referenciados en la cadena cssText del objeto style. Sólo eliminará los fijados mediante el objeto style, no los restantes que hayan sido fijados en la cascada de estilos CSS.

  • Tres botones de comando que llaman a las funciones antes comentadas.

  • Para consultar el valor de las propiedades, al hacer clic sobre el botón get, deberemos acceder a la Herramientas F12 de Internet Explorer y allí ver la consola de texto –pulsando la tecla F12 y seleccionado la opción de la barra de herramientas Consola de texto-.

Listado 2: Fijación de estilos mediante la cadena cssText del objeto style.


    <!doctype html>

    <html>

    <head lang="es-es">

    <meta charset="utf-8" />

    <title>Set, Get and Remove CSS Properties -
    cssText</title>

    <script>

    //set

    function set() {

    var divStyle = document.getElementById('A').style;

    divStyle.cssText = 'background-color:yellow;border:4px solid
    black;height:300px;width:300px;';

    }

    //get

    function get() {

    var divStyle = document.getElementById('A').style;

    console.log("style= " + divStyle.cssText);

    }

    //remove

    function remove() {

    var divStyle = document.getElementById('A').style;

    divStyle.cssText = '';

    }

    </script>

    </head>

    <body>

    <div id="A"></div>

    <hr />

    <input type="button" value="set" onclick="set()" />

    <input type="button" value="get" onclick="get()" />

    <input type="button" value="remove" onclick="remove()" />

    </body>

    </html>

NOTA: Las propiedades del objeto style sólo modifican y devuelven el valor de aquellos estilos que hayan sido fijados con dicho objeto, no los restantes de la cascada de valores de las hojas de estilo CSS. Para ello hemos de acudir a, por ejemplo, ajustar sus propiedades como citamos seguidamente.

Fijar las propiedades de estilo de forma genérica

Por otra parte, siempre podremos acudir a los métodos de fijación de valores de atributos de elementos HTML.

Así, el atributo style de una etiqueta HTML puede contener una cadena de caracteres con las propiedades de estilo, como hemos comentado más arriba. Adicionando o incluyendo valores en el atributo, recabando su valor o eliminando el atributo, llegaremos a poder controlar dinámicamente aspectos del CSS mediante JavaScript.

En un artículo anterior habíamos tratado el tema de los atributos de los elementos del DOM y su gestión:

Explorando el DOM: Objeto element. Atributos y su gestión

En uno de sus apartados comentábamos los métodos disponibles al respecto, que recogemos en la tabla que sigue:

MétodoDescripción
setAttributeFija el valor de un determinado atributo, se pasa el nombre del atributo a fijar y su valor.
getAttributeDevuelve un valor de un determinado atributo, o nulo –cadena vacía- de no existir
removeAttributeRetira un determinado atributo. Es el modo recomendado de hacerlo y no fijando un valor nulo mediante setAttribute.

Sus sintaxis son, respectivamente:

  • elemento.setAttribute(atributo, valor)

  • valor = elemento.getAttribute(atributo)

  • elemento.removeAttribute(atributo)

  • En donde el valor dado o devuelto es una cadena que contenga las propiedades de estilo en el formato CSS, véase la Tabla 1.

Un ejemplo podemos verlo en el Listado 3:

  • Codificaremos tres funciones JavaScript, con las siguientes funcionalidades:

  • set: fija los valores de los atributos referenciados en la cadena de propiedades de estilos CSS.

  • get: devuelve el valor de los atributos referenciados en la cadena de propiedades de estilos CSS. Devolverá todos los estilos fijados en la cascada de estilos CSS.

  • remove: elimina –pone a cero- los atributos referenciados en la cadena de propiedades de estilos CSS. Eliminará todos los fijados en la cascada de estilos CSS.

  • Tres botones de comando que llaman a las funciones antes comentadas.

  • Para consultar el valor de las propiedades, al hacer clic sobre el botón get, deberemos acceder a la Herramientas F12 de Internet Explorer y allí ver la consola de texto –pulsando la tecla F12 y seleccionado la opción de la barra de herramientas Consola detexto-.

Listado 3: Estilos mediante el atributo style de los elementos–etiquetas- HTML.


    <!doctype html>

    <html>

    <head lang="es-es">

    <meta charset="utf-8" />

    <title>Set, Get and Remove CSS Properties -
    setAttribute</title>

    <script>

    //set

    function set() {

    var divStyle = document.getElementById('A');

    divStyle.setAttribute('style', 'background-color:yellow;border:4px
    solid black;height:300px;width:300px;');

    }

    //get

    function get() {

    var divStyle = document.getElementById('A');

    console.log("style= " + divStyle.getAttribute('style'));

    }

    //remove

    function remove() {

    var divStyle = document.getElementById('A');

    divStyle.removeAttribute('style');

    }

    </script>

    </head>

    <body>

    <div id="A"></div>

    <hr />

    <input type="button" value="set" onclick="set()" />

    <input type="button" value="get" onclick="get()" />

    <input type="button" value="remove" onclick="remove()" />

    </body>

    </html>

Conclusiones

En el presente artículo hemos visto cómo gestionar los inline styles, de los atributos style de las etiquetas HTML, mediante rutinas simples en JavaScript, bien usando el objeto homónimo style, bien actuando directamente con los métodos generales de gestión de los valores de los atributos.

Esperamos que lo aquí expuesto les haya servido de ayuda en su trabajo y no dejen de preguntar cualquier duda que les pudiese surgir. Hasta la próxima, tengan unas provechosas sesiones de programación.

©Jaime Peña Tresancos, 2015

Twitter: @jpt219

LinkedIn:es.linkedin.com/pub/jaime-peña-tresancos/28/677/696

© 2018 Microsoft