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


Utilizando este script para hacer 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 ... está interpretando el - como un menos supongo ... el depurador dice 'error de referencia no capturado'. No puedo poner comillas alrededor, porque no es una cadena. Entonces, ¿cómo uso esta propiedad de objeto?


74
2017-08-19 13:53


origen


Respuestas:


EDITAR

Mire los comentarios que verá que para las propiedades CSS la notación de teclas no es compatible con varias propiedades. Usando la notación de clave de caja de camello, por lo tanto, es la forma actual

obj.style-attr // would become 

obj["styleAttr"]

Use notación clave en lugar de punto

style["text-align"]

Todas las matrices en js son objetos y todos los objetos son simplemente 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 las propiedades de esta manera

  1. se evalúan de modo 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] te daría un error indefinido mientras que obj ["método"] no

  2. Debe usar esta notación si está usando caracteres que no están permitidos en las variables js.

Esta expresión regular lo resume todo

[a-zA-Z_$][0-9a-zA-Z_$]*

98
2017-08-19 13:54



Propiedades CSS con un - están representados en camelCase en objetos Javascript. Eso sería:

alert( style.textAlign );

También puede usar una notación de corchete para usar la cuerda:

alert( style['text-align'] );

Los nombres de propiedad solo pueden contener caracteres, números, los bien conocidos $ signo y el _ (gracias a pimvdb).


15
2017-08-19 13:54



La respuesta a la pregunta original es: coloque el nombre de la propiedad entre comillas y use 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 de CSS que tienen guiones se convierten automáticamente en envoltura de camello. En ese caso, puede usar el nombre de camel case como:

style.textAlign;

Sin embargo, esta solución solo funciona para las propiedades de CSS. Por ejemplo,

obj['a-b'] = 2;
alert(obj.aB);          // undefined
alert(obj['a-b']);      // 2

13
2017-08-19 13:55



Use corchetes:

var notTheFlippingStyleObject = {
    'a-b': 1
};

console.log(notTheFlippingStyleObject["a-b"] === 1); // true

Más información sobre objetos: MDN

NOTA: Si está accediendo al estilo objeto, CSSStyleDeclaration, use must camelCase para acceder desde javascript. Más información aquí


5
2017-08-19 13:54



Las propiedades de estilo con guiones son referenciado a través de camelCase en JavaScript, entonces usa style.textAlign.


3
2017-08-19 13:55



Para resolver tu problema: Las propiedades de CSS con guiones en ellas son representado por las propiedades de JavaScript en camelCase para evitar este problema Usted quiere: style.textAlign.

Para responder la pregunta: Utilizar la notación de corchetes: obj.prop es lo mismo que obj["prop"] para que pueda acceder a los nombres de propiedad usando cadenas y usar caracteres que están prohibidos en los identificadores.


3
2017-08-19 13:55



alert(style.textAlign)

o

alert(style["textAlign"]);

3
2017-08-19 13:55



Para responder directamente a la pregunta: style['text-align'] es cómo haría referencia a una propiedad con un guión. Pero style.textAlign (o style['textAlign']) es lo que debería usarse en este caso.


3
2017-08-19 13:54



Los nombres de propiedad del objeto no son uno a uno para los nombres css.


2
2017-08-19 13:54



Creo que en el caso de los estilos CSS se cambian a camelCase en JavaScript, por lo test-align se convierte textAlign. En el caso general en el que desea acceder a una propiedad que contiene caracteres no estándar, utiliza el estilo de matriz. ['text-align']


2
2017-08-19 13:55