从HTML传递JS参数

Question

This question is more about good practice. I want to write a JS-Module to plot math-functions onto canvas -elements. I know there are several good libraries out there, but I'm new to JavaScript and enjoy math.

The user should use as little JavaScript as possible and I'm wondering how a good JS-library would behave. Would the user have to write a specific id for the canvas elements which should be used by the library? What should the user have to do to get a plot from x = -1 to x = 1 with grid turned on and green axes?

Would this be a good behavior?

<canvas id="plotJS, -1, 1, true, green">

I'm pretty sure this is awful, therefore I'm asking. Is there a convenient way to pass arguments to JS in the html - code? Something like

<canvas id="whatever-i-want" plotJS-xMin="-1" plotJS-xMax="1" plotJS-grid="true" ... >

How is this normally done?

Answer 1

An approach using JSON , data-* attributes as suggested by @SLaks . At html the data attribute value is a single JSON string, accessible at javascript using HTMLElement.dataset , JSON.parse() ; the dataset-plot-js could also be reset at the element using JSON.stringify() with parameter being data-plot-js attribute string parsed as javascript object

 var canvas = document.getElementById("canvas"); var data = JSON.parse(canvas.dataset.plotJs); console.log(data); // change `xMin` data.xMin = "-2"; canvas.dataset.plotJs = JSON.stringify(data); console.log(canvas.dataset.plotJs); 

 <canvas id="canvas" data-plot-js='{"xMin":"-1","xMax":"1","grid":"true","color":"green"}'></canvas>