Como faço referência a uma propriedade de objeto javascript com um hífen?

Usando este script para fazer um objeto de estilo de todos os estilos herdados etc.

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

com o seguinte, o primeiro alerta funcionará bem, mas o segundo não ... ele está interpretando o -como um menos, presumo ... o depurador diz 'erro de referência não detectado'. Não posso colocar aspas ao redor, porque não é uma string. Então, como faço para usar essa propriedade de objeto?

EDITAR

Observe os comentários, você verá que, para as propriedades de css, a notação de chave não é compatível com várias propriedades. Usar a notação de chave de caixa de camelo, portanto, é a maneira atual

obj.style-attr // would become 

obj["styleAttr"]

Use notação chave em vez de ponto

style["text-align"]

Todos os arrays em js são objetos e todos os objetos são apenas arrays associativos, isso significa que você pode se referir a um local em um objeto da mesma forma que se referiria a uma chave em um array.

arr[0]

ou o objeto

obj["method"] == obj.method

algumas coisas a serem lembradas ao acessar propriedades desta forma

1. eles são avaliados, então use strings, a menos que você esteja fazendo algo com um contador ou usando nomes de métodos dinâmicos.

   isso significa que obj [método] forneceria um erro indefinido, enquanto obj ["método"] não

2. Você deve usar esta notação se estiver usando caracteres que não são permitidos em variáveis ​​js.

Esta regex resume muito bem

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

As propriedades CSS com a -são representadas em camelCase em objetos Javascript. Isso seria:

alert( style.textAlign );

Você também pode usar uma notação de colchetes para usar a string:

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

Os nomes das propriedades podem conter apenas caracteres, números, o $sinal conhecido e o _(graças a pimvdb).

A resposta à pergunta original é: coloque o nome da propriedade entre aspas e use a indexação de estilo de matriz:

obj['property-with-hyphens'];

Muitos apontaram que a propriedade em que você está interessado é uma propriedade CSS. As propriedades CSS que possuem hifens são convertidas automaticamente em letras maiúsculas e minúsculas. Nesse caso, você pode usar o nome camel case como:

style.textAlign;

No entanto, esta solução só funciona para propriedades CSS. Por exemplo,

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

Use colchetes:

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

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

Mais informações sobre objetos: MDN

NOTA: Se você estiver acessando o objeto de estilo , CSSStyleDeclaration , use o camelCase necessário para acessá-lo a partir do javascript. Mais informações aqui

alert(style.textAlign)

ou

alert(style["textAlign"]);

Para responder diretamente à pergunta: style['text-align']é como você faria referência a uma propriedade com um hífen. Mas style.textAlign(ou style['textAlign']) é o que deve ser usado neste caso.

As propriedades de estilo hifenizadas são referenciadas por meio de camelCase em JavaScript , então use style.textAlign.

Para resolver seu problema : As propriedades CSS com hífens neles são representadas por propriedades JavaScript em camelCase para evitar esse problema. Você quer:style.textAlign .

Para responder à pergunta : Use a notação de colchetes : obj.propé o mesmo que obj["prop"]para que você possa acessar nomes de propriedades usando strings e usar caracteres proibidos em identificadores.

Os nomes das propriedades do objeto não são correspondências um-para-um para os nomes css.

Eu acho que no caso de estilos CSS eles são alterados para camelCase em Javascript e assim test-alignse torna textAlign. No caso geral em que você deseja acessar uma propriedade que contém caracteres não padrão, você usa o estilo de matriz. ['text-align']

No início, me pergunto por que a solução não funcionou no meu fim

api['data-sitekey'] //returns undefined

... mais tarde descobrir que acessar atributos de dados é diferente: Deve ser assim:

var api = document.getElementById("some-api");
api.dataset.sitekey

Espero que isto ajude!