How to associate a property of a javascript object with a hyphen in it?

Question

Using this script to create a style object of all inherited styles, etc.

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

with the following, the first warning will work fine, and the second will not ... interpret it as a minus, which I assume. the debugger says "fuzzy reference error." However, I cannot use quotation marks because it is not a string. So how can I use this property of an object?

Answer 1

EDIT

Take a look at the comments that you will see that for css properties, key notation is incompatible with a number of properties. Using the camel key symbol is therefore the current way

 obj.style-attr // would become obj["styleAttr"] 

---

Use notation, not dot

 style["text-align"] 

All arrays in js are objects, and all objects are just associative arrays, which means that you can refer to a place in an object the same way you refer to a key in an array.

 arr[0] 

or object

 obj["method"] == obj.method 

a couple of things to remember when accessing properties this way

• they are computed to use strings unless you are doing something with a counter or using dynamic method names.

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

• You should use this notation if you use characters that are not allowed in js variables.

This regex pretty much sums it up

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

Answer 2

CSS properties with - represented in camelCase in Javascript objects. This will:

 alert( style.textAlign ); 

You can also use parenthesis to use a string:

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

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

Answer 3

The answer to the original question: put the property name in quotation marks and use array style indexing:

 obj['property-with-hyphens']; 

Several people have indicated that the property you are interested in is a CSS property. CSS properties with hyphens are automatically converted to the camel body. In this case, you can use the name with a camel, for example:

 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 

Answer 4

Use brackets:

 var notTheFlippingStyleObject = { 'a-b': 1 }; console.log(notTheFlippingStyleObject["ab"] === 1); // true 

Additional property information: MDN

NOTE. If you are accessing a style object, CSSStyleDeclaration , use camelCase to access it from javascript. More here

Answer 5

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

Answer 6

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

Answer 7

To solve your problem : 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 the square bracket designation : obj.prop matches obj["prop"] , so you can access property names using strings and use characters that are not allowed in identifiers.

Answer 8

 alert(style.textAlign) 

or

 alert(style["textAlign"]); 

Answer 9

Object property names are not one-to-one matches for css names.

Answer 10

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

Answer 11

At first, I wonder why the solution didn’t work at my end.

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

... later find out that access to data attributes is different: It should be like this:

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

Hope this helps!