Comment Comment by vaylian Good article. There is also a nice middle ground with the data-attributes:```<div id="myDiv" data-payload="something"></div>```These data-attributes are then automatically available to JavaScript as a read+write property:```document.getElementById('myDiv').dataset.payload == "something"```However, one has to be mindful that HTML attributes use -kebab-case- while JavaScript uses camelCase. Thus```<div id="example-div" data-my-cool-data-attribute="fun"></div>```becomes```document.getElementById('example-div').dataset.myCoolDataAttribute == "fun"``` parent vaylian 2 years ago
```
<div id="myDiv" data-payload="something"></div>
```
These data-attributes are then automatically available to JavaScript as a read+write property:
```
document.getElementById('myDiv').dataset.payload == "something"
```
However, one has to be mindful that HTML attributes use -kebab-case- while JavaScript uses camelCase. Thus
```
<div id="example-div" data-my-cool-data-attribute="fun"></div>
```
becomes
```
document.getElementById('example-div').dataset.myCoolDataAttribute == "fun"
```