Question

我有一个JavaScript参数对象，该对象带有以下结构的HTML内容。

function (type, content, title) { 

  // Replace code should go here

  options = {
    "data-onclick": null; 
    "data-progress": false;
  }
}

内容对象的内容如下：

<div id=content data-onclick="onclickValue" data-progress="true"></div>

我想从HTML div中读取data-参数，并分配它们以替换JavaScript函数中相同的命名函数。

所有这些都应该发生在我的JavaScript函数的顶部，并替换同一函数中的属性。

感谢您提供任何帮助或指针来实现这一目标，我对JavaScript不太熟练。

Answer 1

// first select the html element
var element = document.getElementById('content');

// use the getAttribute('attribute-to-get') method to get your attributes 
var options = {
  'data-onclick': element.getAttribute('data-onlick'),
  'data-progress': element.getAttribute('data-progress')
};

// consider using a hidden input field rather than hiding the element with css 
// this is best practice
<input type="hidden" id="content" data-onclick="onclickValue" data-progress="true" />

Answer 2

我会做些什么（假设使用jQuery）：

在您的html中创建一个不可见的div
设置div的innerHTML
将不可见div的属性设置为对象：

$("#invisible").html(content);
options["data-onclick"] = $("#invisible").find("#content").attr("data-onclick");
options["data-progress"] = $("#invisible").find("#content").attr("data-progress");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="invisible" style="display: none;">

读取html对象并将javascript属性替换为读取值

2 个答案: