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.
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.
|
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.
