Search notes:

HTMLElement: dataset

The dataset property of a HTMLElement object returns a DOMStringMap which allows to read and write to/from an HTML element's custom data attributs (i.e. values of attributes whose names start with data-).

The HTML document of the following example has three divs which have the x and y coordinates where they should be positioned in a data-x and data-y attribute.

The JavaScript function then iterates over each div and reads these attributes and positions the divs using the CSS properties position, left and top.

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>attributeStyleMap</title>
</head>

<style>
   * { font-family: sans-serif }
</style>
<script>

function main() {

   let elems = document.querySelectorAll('div');

   for (let elem of elems) {

      let dat = elem.dataset;

      elem.style.position = 'absolute';
      elem.style.left     =  dat.x;
      elem.style.top      =  dat.y;
   }
}

</script>

<body onload='main()'>

   <div data-x="52px" data-y="81px">Foo</div>
   <div data-x="69px" data-y="27px">Bar</div>
   <div data-x="27px" data-y="55px">Baz</div>

</body>
</html>

Github repository about-HTML-DOM-API, path: /HTMLElement/dataset.html

HTMLElement: dataset

See also