egenskaper - Hur refererar jag till en JavaScript-objektegenskap som har ett bindestreck i sig?

Jag använder detta skript för att skapa ett stilobjekt av alla ärvda, etc. stilar.

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

Med följande fungerar den första alerten bra, men den andra gör det inte... den tolkar - som ett minus antar jag. Debuggern säger 'uncaught reference error'. Jag kan inte sätta citattecken runt det, eftersom det inte är en sträng. Så hur använder jag den här objekt-egenskapen?

Svar #1

Titta på kommentarerna. Du kommer att se att för CSS-egenskaper är nyckelnotationen inte kompatibel med ett antal egenskaper. Att använda camelkase-nyckelnotationen är därför det nuvarande sättet:

obj.style-attr // would become

obj["styleAttr"]

Använd nyckelnotation istället för punkt

style["text-align"]

Alla arrayer i JavaScript är objekt och alla objekt är bara associativa arrayer. Detta betyder att du kan referera till en plats i ett objekt precis som du skulle referera till en nyckel i en array.

arr[0]

eller objektet

obj["method"] == obj.method

Ett par saker att komma ihåg när man kommer åt egenskaper på det här sättet:

  1. de utvärderas så använd strängar om du inte gör något med en räknare eller använder dynamiska metodnamn.

    Detta betyder att obj[method] skulle ge dig ett undefined-fel medan obj["method"] inte skulle göra det

  2. Du måste använda denna notation om du använder tecken som inte är tillåtna i JavaScript-variabler.

Denna regex sammanfattar det ganska bra:

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

Svar #2

Svaret på den ursprungliga frågan är: sätt egenskapsnamnet inom citattecken och använd array-stil indexering:

obj['property-with-hyphens'];

Flera har påpekat att egendomen du är intresserad av är en CSS-egenskap. CSS-egenskaper som har bindestreck konverteras automatiskt till camel case. I det fallet måste du använda det camel case-namn som:

style.textAlign;

Men denna lösning fungerar bara för CSS-egenskaper. Till exempel,

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

Svar #3

CSS-egenskaper med en - representeras i camelCase i JavaScript-objekt. Det skulle vara:

alert( style.textAlign );

Du kan också använda en hakeparentesnotation för att använda strängen:

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

Egenskapsnamn får endast innehålla bokstäver, siffror, den välkända $-tecknet och _ (tack till pimvdb).

Svar #4

Använd hakparenteser:

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

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

Mer information om objekt: MDN

OBS: Om du får åtkomst till stilobjektet, CSSStyleDeclaration, måste du använda camelCase för att komma åt det från JavaScript. Mer information finns här.

Relaterade artiklar