web-dev-qa-db-fra.com

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

Utiliser ce script pour créer un objet style avec 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 correctement, mais la seconde ne le fera pas .. elle interprétera le - comme un défaut, je suppose. le débogueur dit "erreur de référence non capturée". Je ne peux cependant pas mettre de guillemets, car ce n'est pas une chaîne. Alors, comment utiliser cette propriété d'objet?

javascriptproperties
93
Damon

EDIT

Regardez les commentaires que vous verrez que pour les propriétés css, la notation de clé n’est pas compatible avec un certain nombre de propriétés. Utiliser la notation de la casse du 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. Cela signifie que vous pouvez faire référence à un emplacement dans un objet, comme vous le feriez à une clé dans un tableau.

arr[0]

ou l'objet

obj["method"] == obj.method

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

  1. ils sont évalués, donc utilisez des chaînes à moins que vous ne fassiez 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 tandis que obj ["méthode"] ne

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

Cette regex résume à peu près tout

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

Propriétés CSS avec un - sont représentés dans camelCase dans des 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 bien connu $ signe et le _ (merci à pimvdb).

16
jAndy

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

obj['property-with-hyphens'];

Plusieurs ont fait remarquer que la propriété qui vous intéresse est une propriété CSS. Les propriétés CSS comportant des traits d'union sont automatiquement converties en enveloppes de chameaux. Dans ce cas, vous pouvez utiliser le nom camel casé comme suit:

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
14
Stoney

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 style , CSSStyleDeclaration , utilisez must camelCase pour y accéder à partir de javascript. Plus d'infos ici

6
Joe
alert(style.textAlign)

ou

alert(style["textAlign"]);
4
Brian

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

3
Dawson Toth

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

3
Jonny Buchanan

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 afin d'éviter ce problème. Tu veux: style.textAlign.

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

3
Quentin

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

2
Doug Chamberlain

Je pense que dans le cas des styles CSS, ils sont remplacés par camelCase en Javascript, donc test-align devient 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']

2
GordonM