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

Question

I am 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?

Answer 1

Look at the comments. You will see that for CSS properties, the 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 JavaScript 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 JavaScript variables.

This regex pretty much sums it up:

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

Answer 2

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 must 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