Cambiar CSS con JavaScript: lista o tabla de equivalencias de propiedades CSS - JS. Camelcase (CU01129E)

Resumen: Entrega nº29 del curso "Tutorial básico del programador web: JavaScript desde cero".
Codificación aprenderaprogramar.com: CU01129E

 

 

SINTAXIS JAVASCRIPT PARA PROPIEDADES CSS

En la anterior entrega del curso hemos visto cómo utilizando JavaScript podemos modificar propiedades CSS asocidas al código HTML de nuestra página web. Dicha sintaxis se basa en el uso de la palabra clave style y la sintaxis JavaScript-DOM para propiedades CSS, cuyas equivalencias mostraremos.

 

logo javascript

 

Recordemos la sintaxis para poder ejecutar modificaciones de estilo con JavaScript:

nodoDelDomAlQueAccedemos.style.nombrePropiedad = 'valorPropiedad';

 

 

Un ejemplo sería: elementosObtenidos[1].style.backgroundColor = '#FF9933';

Donde elementosObtenidos[1] corresponde a un nodo del DOM. Y backgroundColor es la propiedad CSS que deseamos cambiar pero expresada con sintaxis JavaScript. La sintaxis CSS es background-color mientras que la sintaxis JavaScript es backgroundColor. En este caso son similares, pero no exactamente iguales. En otros casos sí hay coincidencia. A continuación mostramos una lista de equivalencias con la que nos será útil trabajar, ya que no será posible memorizarlo todo.

 

Propiedad CSS

Sintaxis JavaScript

background

background

background-attachment

backgroundAttachment

background-color

backgroundColor

background-image

backgroundImage

background-position

backgroundPosition

background-repeat

backgroundRepeat

border

border

border-bottom

borderBottom

border-bottom-color

borderBottomColor

border-bottom-style

borderBottomStyle

border-bottom-width

borderBottomWidth

border-color

borderColor

border-left

borderLeft

border-left-color

borderLeftColor

border-left-style

borderLeftStyle

border-left-width

borderLeftWidth

border-right

borderRight

border-right-color

borderRightColor

border-right-style

borderRightStyle

border-right-width

borderRightWidth

border-style

borderStyle

border-top

borderTop

border-top-color

borderTopColor

border-top-style

borderTopStyle

border-top-width

borderTopWidth

border-width

borderWidth

clear

clear

clip

clip

color

color

cursor

cursor

display

display

filter

filter

float cssFloat

font

font

font-family

fontFamily

font-size

fontSize

font-variant

fontVariant

font-weight

fontWeight

height

height

left

left

letter-spacing

letterSpacing

line-height

lineHeight

list-style

listStyle

list-style-image

listStyleImage

list-style-position

listStylePosition

list-style-type

listStyleType

margin

margin

margin-bottom

marginBottom

margin-left

marginLeft

margin-right

marginRight

margin-top

marginTop

overflow

overflow

padding

padding

padding-bottom

paddingBottom

padding-left

paddingLeft

padding-right

paddingRight

padding-top

paddingTop

page-break-after

pageBreakAfter

page-break-before

pageBreakBefore

position

position

text-align

textAlign

text-decoration

textDecoration

text-indent

textIndent

text-transform

textTransform

top

top

vertical-align

verticalAlign

visibility

visibility

width

width

z-index

zIndex

 

 

La regla general que se puede seguir es que para referirnos a una propiedad CSS en JavaScript debemos usar “CamelCase”. CamelCase es un estilo para escribir nombres de elementos de un lenguaje que están formados por varias palabras según el cual en este caso la primera letra la escribiremos en minúscula y luego el comienzo de cada palabra irá en mayúscula (sin separación). Así si quisiéramos poner un nombre de variable para reflejar la “distancia entre puntos” usaríamos distanciaEntrePuntos, o para reflejar el “número de personas que entran por hora al teatro” podríamos usar numeroPersonasEntranPorHoraTeatro.

La mayor parte de las propiedades CSS siguen esta regla. En algunos casos una palabra es palabra clave en JavaScript y para evitar confusiones se antecede de css, por ejemplo la propiedad CSS float tiene como equivalente cssFloat y la propiedad CSS text tiene como equivalente cssText.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MAYO - JUNIO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación