Comment référencer une propriété d'objet javascript avec un trait d'union?

Utilisation de ce script pour créer un objet de style de tous les styles hérités etc.

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

avec ce qui suit, la première alerte fonctionnera bien, mais la seconde ne fonctionnera pas ... elle interprète le -comme un moins je suppose ... le débogueur dit «erreur de référence non interceptée». Cependant, je ne peux pas mettre de guillemets autour, car ce n'est pas une chaîne. Alors, comment utiliser cette propriété d'objet?

ÉDITER

Regardez les commentaires, vous verrez que pour les propriétés css, la notation par clé n'est pas compatible avec un certain nombre de propriétés. L'utilisation de la notation clé en cas de chameau est donc la méthode actuelle

obj.style-attr // would become 

obj["styleAttr"]

Utilisez la notation clé plutôt que le point

style["text-align"]

Tous les tableaux de js sont des objets et tous les objets ne sont que des tableaux associatifs, ce qui signifie que vous pouvez faire référence à un endroit dans un objet comme vous le feriez pour une clé dans un tableau.

arr[0]

ou l'objet

obj["method"] == obj.method

quelques points à retenir lors de l'accès aux propriétés de cette façon

1. ils sont évalués donc utilisez des chaînes sauf si vous faites quelque chose avec un compteur ou en utilisant des noms de méthodes dynamiques.

   cela signifie que obj [méthode] vous donnerait une erreur non définie alors que obj ["méthode"] ne le ferait pas

2. Vous devez utiliser cette notation si vous utilisez des caractères qui ne sont pas autorisés dans les variables js.

Cette regex résume à peu près tout

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

Les propriétés CSS avec un -sont représentées dans camelCase dans les objets Javascript. Ce serait:

alert( style.textAlign );

Vous pouvez également utiliser une notation entre crochets pour utiliser la chaîne:

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

Les noms de propriétés ne peuvent contenir que des caractères, des chiffres, le $signe bien connu et le _(merci à pimvdb).

La réponse à la question d'origine est: placez le nom de la propriété entre guillemets et utilisez l'indexation de style tableau:

obj['property-with-hyphens'];

Plusieurs ont souligné que la propriété qui vous intéresse est une propriété CSS. Les propriétés CSS qui ont des traits d'union sont automatiquement converties en boîtier camel. Dans ce cas, vous pouvez utiliser le nom en boîtier de chameau comme:

style.textAlign;

Cependant, cette solution ne fonctionne que pour les propriétés CSS. Par exemple,

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

Utilisez des crochets:

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

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

Plus d'infos sur les objets: MDN

REMARQUE: Si vous accédez à l' objet de style , CSSStyleDeclaration , utilisez must camelCase pour y accéder à partir de javascript. Plus d'infos ici

alert(style.textAlign)

ou

alert(style["textAlign"]);

Pour répondre directement à la question: style['text-align']comment référencer une propriété avec un trait d'union. Mais style.textAlign(ou style['textAlign']) est ce qui devrait être utilisé dans ce cas.

Les propriétés de style avec trait d'union sont référencées via camelCase en JavaScript , donc utilisez style.textAlign.

Pour résoudre votre problème : Les propriétés CSS contenant des traits d'union sont représentées par des propriétés JavaScript dans camelCase pour éviter ce problème. Vous voulez: style.textAlign.

Pour répondre à la question : Utilisez la notation entre crochets : obj.propest la même chose que obj["prop"]si vous pouvez accéder aux noms de propriétés à l'aide de chaînes et utiliser des caractères interdits dans les identificateurs.

Les noms de propriété d'objet ne correspondent pas un à un pour les noms css.

Je pense que dans le cas des styles CSS , ils sont changés à camelCase en Javascript donc test-aligndevient textAlign. Dans le cas général où vous souhaitez accéder à une propriété contenant des caractères non standard, vous utilisez le style tableau. ['text-align']

Au début, je me demande pourquoi la solution n'a pas fonctionné de mon côté

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

... plus tard, découvrez que l'accès aux attributs de données est différent: cela devrait ressembler à ceci:

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

J'espère que cela t'aides!