Comment référencer une propriété d'objet JavaScript contenant un trait d'union ?

Question

J'utilise cette script pour créer un objet style de tous les styles hérités, etc.

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

Dans le cas suivant, la première alerte fonctionnera correctement, mais pas la seconde... elle interprète le code - comme un moins, je suppose. Le débogueur indique "uncaught reference error". Mais je ne peux pas l'entourer de guillemets, car ce n'est pas une chaîne de caractères. Comment puis-je donc utiliser cette propriété d'objet ?

Answer 1

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 camel case est donc la solution actuelle :

obj.style-attr // would become

obj["styleAttr"]

---

Utiliser la notation de clé plutôt que le point

style["text-align"]

Tous les tableaux en JavaScript sont des objets et tous les objets sont des tableaux associatifs. Cela signifie que vous pouvez vous référer à une place 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 lorsque vous accédez à des propriétés de cette manière :

1. ils sont évalués, donc utilisez des chaînes de caractères à moins que vous ne fassiez quelque chose avec un compteur ou que vous n'utilisiez des noms de méthodes dynamiques.

   Cela signifie que obj[method] donnerait une erreur non définie alors que obj["method"] n'en donnerait pas

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

Cette regex résume assez bien la situation :

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

Answer 2

La réponse à la question initiale est la suivante : placez le nom de la propriété entre guillemets et utilisez une indexation de type tableau :

obj['property-with-hyphens'];

Plusieurs personnes ont signalé que la propriété qui vous intéresse est une propriété du CSS. Les propriétés CSS comportant des traits d'union sont automatiquement converties en camel casing. Dans ce cas, vous devez utiliser le nom en majuscules comme :

style.textAlign;

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

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

Answer 3

Les propriétés CSS avec un - sont représentés en camelCase dans les objets JavaScript. Il s'agirait donc de

alert( style.textAlign );

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

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

Les noms des biens ne peuvent contenir que des caractères, des nombres, le symbole bien connu $ et le signe _ (merci à pimvdb).

Answer 4

Utilisez des crochets :

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

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

Plus d'informations sur les objets : MDN

REMARQUE : Si vous accédez au style objet, CSSStyleDeclaration vous devez utiliser camelCase pour y accéder à partir de JavaScript. Pour plus d'informations, voir aquí .

Answer 5

Pour répondre directement à la question : style['text-align'] est la façon de référencer une propriété avec un trait d'union. Mais il n'en est rien. style.textAlign (ou style['textAlign'] ) est ce qu'il faut utiliser dans ce cas.