jquery - Naming Convention For Data Attribute Value When Used Specifically for Javascript - Stack Overflow

admin管理员组

文章数量:1399932

For the Data Attribute Value, is it convention to use hyphens or camelCase?

Hyphen Example:

<input type="text" name="some_input"  data-target="to-grab-input-via-javascript">

Camel Case Example

<input type="text" name="some_input"  data-target="toGrabInputViaJavaScript">

A google search brings up the naming conventions on the data attribute itself, but not the naming convention on the data attribute's value. All examples I found only had one word for the data attribute value as well, so I could not find an answer to this question.

Javascript likes things camel cased, so I would imagine it should be camel cased, but I do not want to make an assumption.

For the Data Attribute Value, is it convention to use hyphens or camelCase?

Hyphen Example:

<input type="text" name="some_input"  data-target="to-grab-input-via-javascript">

Camel Case Example

<input type="text" name="some_input"  data-target="toGrabInputViaJavaScript">

A google search brings up the naming conventions on the data attribute itself, but not the naming convention on the data attribute's value. All examples I found only had one word for the data attribute value as well, so I could not find an answer to this question.

Javascript likes things camel cased, so I would imagine it should be camel cased, but I do not want to make an assumption.

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 13, 2018 at 18:46 Neil asked Apr 13, 2018 at 18:36 NeilNeil 5,1981414 gold badges8585 silver badges165165 bronze badges 5

• 1 There is no standard convention. But, definitely do no use smart quotes (“”) when coding. – Scott Marcus Commented Apr 13, 2018 at 18:38
• @ScottMarcus are you saying that there shouldn't be double quotes around the data attribute value? Are you suggesting single quotes instead, or something else? – Neil Commented Apr 13, 2018 at 18:39
• Back in XML/XSLT days, we used kebab-case everywhere in HTML and CSS, and camelCase in Javascript and JSON. – rishat Commented Apr 13, 2018 at 18:41
• 2 Your question uses formatted "smart" quotes (“”), rather than straight quotes: "". This can cause problems with character encoding. Never use richly formatted text in source code. – Scott Marcus Commented Apr 13, 2018 at 18:43
• @ScottMarcus ahh, updated. – Neil Commented Apr 13, 2018 at 18:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

There is no standard on this. Use what is most fortable for you, but be aware that when retrieving the value with the dataset property, dashed values will be converted to camel case and vice versa:

Name conversion

dash-style to camelCase:

A custom data attribute name is transformed to a key for the DOMStringMap entry with the following rules

• the prefix data- is removed (including the dash);

• for any dash (U+002D) followed by an ASCII lowercase letter a to z, the dash is removed and the letter is transformed into its uppercase counterpart;

• other characters (including other dashes) are left unchanged.

camelCase to dash-style:

The opposite transformation, that maps a key to an attribute name, uses the following rules:

• Restriction: A dash must not be immediately followed by an ASCII lowercase letter a to z (before the transformation);
• a prefix data- is added;
• any ASCII uppercase letter A to Z is transformed into a dash followed by its lowercase counterpart;
• other characters are left unchanged.

The restriction in the rules above ensures that the two transformations are the inverse one of the other.

For example, the attribute named data-abc-def corresponds to the key abcDef.

Here are some other examples:

console.log(document.getElementById("d1").dataset); // "data-this-is-a-test" bees "thisIsATest"
console.log(document.getElementById("d2").dataset); // "data-thisIsATest" bees "thisisatest"

<div id="d1" data-this-is-a-test="foo"></div>
<div id="d2" data-thisIsATest="foo"></div>

本文标签： jqueryNaming Convention For Data Attribute Value When Used Specifically for JavascriptStack Overflow