¿Cómo hago referencia a una propiedad de objeto JavaScript con un guión?

Resuelto Damon asked hace 13 años • 12 respuestas

Estoy usando este script para crear un objeto de estilo de todos los estilos heredados, etc.

var style = css($(this));
alert (style.width);
alert (style.text-align);

Con lo siguiente, la primera alerta funcionará bien, pero la segunda no... -Supongo que se interpreta como un signo negativo. El depurador dice "error de referencia no detectado". Sin embargo, no puedo ponerlo entre comillas porque no es una cadena. Entonces, ¿cómo uso esta propiedad de objeto?

Damon avatar Aug 19 '11 20:08 Damon
Aceptado

Mira los comentarios. Verá que para las propiedades CSS, la notación clave no es compatible con varias propiedades. Por lo tanto, utilizar la notación de clave de caso de camello es la forma actual:

obj.style-attr // would become

obj["styleAttr"]

Utilice notación clave en lugar de punto

style["text-align"]

Todas las matrices en JavaScript son objetos y todos los objetos son solo matrices asociativas. Esto significa que puede hacer referencia a un lugar en un objeto tal como lo haría con una clave en una matriz.

arr[0]

o el objeto

obj["method"] == obj.method

Un par de cosas para recordar al acceder a propiedades de esta manera:

  1. se evalúan, así que use cadenas a menos que esté haciendo algo con un contador o usando nombres de métodos dinámicos.

    Esto significa que obj[método] le daría un error indefinido mientras que obj["método"] no.

  2. Debe utilizar esta notación si utiliza caracteres que no están permitidos en las variables de JavaScript.

Esta expresión regular lo resume bastante bien:

[a-zA-Z_$][0-9a-zA-Z_$]*
austinbv avatar Aug 19 '2011 13:08 austinbv

La respuesta a la pregunta original es: coloque el nombre de la propiedad entre comillas y use la indexación de estilo de matriz:

obj['property-with-hyphens'];

Varios han señalado que la propiedad que le interesa es una propiedad CSS. Las propiedades CSS que tienen guiones se convierten automáticamente a mayúsculas y minúsculas. En ese caso debes usar el nombre en caja de camello como:

style.textAlign;

Sin embargo, esta solución sólo funciona para propiedades CSS. Por ejemplo,

obj['a-b'] = 2;
alert(obj.aB);          // undefined
alert(obj['a-b']);      // 2
Stoney avatar Aug 19 '2011 13:08 Stoney