How do I reference a javascript object property with a hyphen in it?


Using this script to make a style object of all the inherited etc styles.

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

with the following, the first alert will work fine, but the second one doesn't.. it's interpreting the - as a minus I assume.. the debugger says 'uncaught reference error'. I can't put quotes around it, though, because it isn't a string. So how do I use this object property?

EDIT

Look at the comments you will see that for css properties key notation is not compatible with a number of properties. Using the camel case key notation therefore is the current way

obj.style-attr // would become 

obj["styleAttr"]

Use key notation rather than dot

style["text-align"]

All arrays in js are objects and all objects are just associative arrays, this means you can refer to a place in an object just as you would refer to a key in an array.

arr[0]

or the object

obj["method"] == obj.method

a couple things to remember when accessing properties this way

  1. they are evaluated so use strings unless you are doing something with a counter or using dynamic method names.

    this means obj[method] would give you an undefined error while obj["method"] would not

  2. You must use this notation if you are using characters that are not allowed in js variables.

This regex pretty much sums it up

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

The answer to the original question is: place the property name in quotes and use array style indexing:

obj['property-with-hyphens'];

Several have pointed out that the property you are interested in is a CSS property. CSS properties that have hyphens are automatically converted to camel casing. In that case you can use the camel cased name like:

style.textAlign;

However this solution only works for CSS properties. For example,

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

CSS properties with a - are represented in camelCase in Javascript objects. That would be:

alert( style.textAlign );

You could also use a bracket notation to use the string:

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

Property names may only contain characters, numbers, the well known $ sign and the _ (thanks to pimvdb).


Use brackets:

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

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

More info on objects: MDN

NOTE: If you are accessing the style object, CSSStyleDeclaration, use must camelCase to access it from javascript. More info here


alert(style.textAlign)

or

alert(style["textAlign"]);

To directly answer the question: style['text-align'] is how you would reference a property with a hyphen in it. But style.textAlign (or style['textAlign']) is what should be used in this case.


Hyphenated style properties are referenced via camelCase in JavaScript, so use style.textAlign.


To solve your problem: The CSS properties with hyphens in them are represented by JavaScript properties in camelCase to avoid this problem. You want: style.textAlign.

To answer the question: Use square bracket notation: obj.prop is the same as obj["prop"] so you can access property names using strings and use characters that are forbidden in identifiers.


The object property names are not one-to-one matches for the css names.


I think in the case of CSS styles they get changed to camelCase in Javascript so test-align becomes textAlign. In the general case where you want to access a property that contains non-standard characters you use array-style. ['text-align']


At first, I wonder why the solution didn't work on my end

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

...later on figure out that accessing data attributes is different: It should be like this:

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

Hope this helps!