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

Asked 19/8, 2011 at 13:53 Answered 10/10, 2023 at 17:42

153

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?

Kv answered 19/8, 2011 at 13:53 Comment(5)

Damon, addressing the ambiguity & confusion (reflected also by the divergent answers and the added/removed downvotes depending on interpretation...): did you specifically mean CSS properties, as hinted by your example & assumed by most answers, or any JS properties, in general, as indicated by the title and the lack of a CSS tag? [Yes, I know it's been 7 years. :) ] – Hembree 22/10, 2018 at 20:42

@Hembree I meant any js property because i was having a problem with referencing a property that had a hyphen in it (which also happened to be a css property... i didn't realize that there was another problem with what i was trying to do). So it's a weird one that ends up covering 2 different issues. but i'd say the top answer explains both issues. – Kv 25/10, 2018 at 18:41

I don't see anything at all in this question that is specific to jQuery. To me this is a pure JavaScript question. @jAndy, please excuse me for mentioning you here, but if you have the time and inclination, would you mind helping to settle the dispute whether this question is about JavaScript or about jQuery? (The question certainly contains jQuery. That we can all agree on, I think.) – Opulence 29/1, 2021 at 11:39

This post is being discussed on Meta. – Demarcation 29/1, 2021 at 12:28

See also: Unable to access object property with “-” dash – Hollandia 30/1, 2021 at 3:30

197

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:

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
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_$]*

Interfaith answered 19/8, 2011 at 13:54 Comment(6)

key notation doesn't apply here - css defines styles using camel case in the keys: jsfiddle.net/49vkD – Torero 19/8, 2011 at 14:27

what browser? Fails for me on the hyphen gets in IE7, IE8, FFX 3.5. And, by fails I mean displays "undefined" for both of those... – Torero 19/8, 2011 at 14:34

@brian tested in safari and chrome displays red, red, center, center. I will try in ff now – Interfaith 19/8, 2011 at 14:36

@brian interesting, didn't work in firefox6, I didn't know that... learn something new every day – Interfaith 19/8, 2011 at 14:42

Yeah - I tend to err on the side of caution when it comes to making Chrome the authority ... Some very odd behaviors in chrome... for instance, chrome allows this = <that>;" #6794869 – Torero 19/8, 2011 at 14:46

Removed my downvote as another responder pointed out CSS collection happened to be the subject of hte question, but the actual question was how to get a hyphenated property. – Torero 19/8, 2011 at 14:51

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

Blaylock answered 19/8, 2011 at 13:55 Comment(4)

@Torero You are correct for CSS properties. However, I was answering the original general question "How do I reference a javascript object property with a hyphen in it?" Here is an updated version of your jsfiddle: jsfiddle.net/49vkD/1 – Blaylock 19/8, 2011 at 14:48

indeed I narrowed the scope of the answers here on my own - I assumed the OP meant specifically style objects. Removed my down-vote as the question was a bit more open ended than that. – Torero 19/8, 2011 at 14:50

I think you are correct. That is what probably what Damon wanted. I read it too literally. – Blaylock 19/8, 2011 at 15:5

You must use the camel cased name. Not can. – Languet 30/7, 2016 at 1:58

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).

Filum answered 19/8, 2011 at 13:54 Comment(4)

the latter works.. one of those syntaxy things I just missed out on. the script I referenced uses the regular css style names, but still useful to know about! – Kv 19/8, 2011 at 14:12

property names cannot start with numbers though – Interfaith 19/8, 2011 at 14:39

Property names can contain a vast ammount of Unicode characters. It's ok with the spec and it's ok with the browsers. For example: var ò_ó = 'angry'; – Stenograph 21/9, 2012 at 11:24

Do not use the second code. CSS properties are camel-cased. Your code might work on some browsers but is not standard. – Languet 30/7, 2016 at 1:58

Use brackets:

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

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

More information on objects: MDN

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

Tramel answered 19/8, 2011 at 13:54 Comment(2)

You're not appeasing me - you're appeasing w3c standard, per numerous other responders to this question: w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties, but upvoted just the same ... – Torero 19/8, 2011 at 14:41

Do not use this code. It's not that camel cased CSS properties are more cross-browser, it's that using hyphens instead of camel case is not standard and should not work. – Languet 30/7, 2016 at 2:3

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.

Scarlet answered 19/8, 2011 at 13:54 Comment(2)

Do not use this. CSS properties are camel-cased. Your code might work on some browsers but is not standard. – Languet 30/7, 2016 at 1:56

Adjusted to use camel case. – Scarlet 1/8, 2016 at 20:45

alert(style.textAlign)

alert(style["textAlign"]);

Torero answered 19/8, 2011 at 13:55 Comment(0)

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

Symposium answered 19/8, 2011 at 13:55 Comment(0)

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.

Fructose answered 19/8, 2011 at 13:55 Comment(0)

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']

Thurmond answered 19/8, 2011 at 13:55 Comment(0)

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

Nee answered 19/8, 2011 at 13:54 Comment(0)

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

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

...later on I figured out that accessing data attributes was different:

It should be like this:

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

Stamp answered 13/7, 2015 at 14:0 Comment(1)

This pointed me in the right direction, but there is another wrinkle: if there are 2 hypens, the second one gets camelized, so data-increment-value becomes dataset.incrementValue. – Certificate 9/1 at 0:13

If anyone is looking for modifying certain properties of element.style it sometimes require appropriate units such as px, rem, %

For instance, instead of this

element.style.marginBottom = 12;

Try this

element.style.marginBottom = '12px';

Dodecahedron answered 10/10, 2023 at 17:42 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags