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?




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 // would become 


Use key notation rather than dot


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.


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


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


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:


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




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");

Hope this helps!


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.