从HTML传递JS参数

时间:2016-03-03 20:14:41

标签: javascript html arguments

这个问题更多的是关于良好做法。我想编写一个JS-Module来将数学函数绘制到canvas - 元素上。我知道有几个很好的库,但我是JavaScript新手,喜欢数学。

用户应该使用尽可能少的JavaScript,我想知道一个好的JS库如何表现。用户是否必须为库应该使用的画布元素编写特定的id?在网格打开和绿轴的情况下,用户应该怎样做才能从 x = -1 x = 1 绘制图?

这会是一个好行为吗?

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

我很确定这很糟糕,所以我问。有没有一种方便的方法可以在html代码中将参数传递给JS?像

这样的东西
<canvas id="whatever-i-want" plotJS-xMin="-1" plotJS-xMax="1" plotJS-grid="true" ... >

这通常是怎么做的?

1 个答案:

答案 0 :(得分:1)

使用@SLaks建议的JSONdata-*属性的方法。在htmldata属性值是一个JSON字符串,可在javascript使用HTMLElement.datasetJSON.parse()访问; dataset-plot-js也可以使用JSON.stringify()重置元素,参数为data-plot-js属性字符串解析为javascript对象

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>