您好,欢迎访问一九零五行业门户网

如何在HTML中将自定义数据存储为页面或应用程序的私有数据?

自定义属性是专门设计的属性,不包含在标准 html5 属性中。它们使我们能够通过添加自己的数据来自定义 html 标签。
自定义属性是以 data- 开头的任何属性。我们可以使用 data-* 属性在所有的 html 组件上嵌入自定义属性。
语法:html在html中,data-*属性的语法相对简单。以data-开头的每个元素都是一个data-*属性。
<sample_data> id = “sample” data-index = 1 data-row = 23 data-column = 44</sample_data>
语法:使用 javascript 访问使用 javascript 访问这些数据属性也相对简单。我们可以使用 getattribute() 及其完整的 html 名称,可以使用 dataset 属性读取该名称。
const article = document.queryselector('#sample');sample_data.dataset.index;sample_data.dataset.row;sample_data.dataset.column;
语法:使用css访问使用css的attr()函数来访问数据。
sample_data::before { content: attr(data-index);}
以下是示例...
example 的中文翻译为:示例在下面的示例中,我们使用 javascript 读取属性的值。
<!doctype html><html><body> <h1>result</h1> <ul> <li onclick=showposition(this) id=siddarth data-position=winner> siddarth </li> <li onclick=showposition(this) id=arjun data-position=runner up> arjun </li> <li onclick=showposition(this) id=badri data-position=third> badri </li> <li onclick=showposition(this) id=nanda data-position=lost> nanda </li> </ul> <script> function showposition(runner) { var position = runner.getattribute(data-position); alert(the + runner.innerhtml + is + position + .); } </script></body></html>
输出在执行上述脚本时,它将生成一个包含一些数据的名称列表的输出。
当您尝试点击任何一个名称时,该函数会获取数据并显示一个警告框,其中显示了我们使用的自定义数据。
以上就是如何在html中将自定义数据存储为页面或应用程序的私有数据?的详细内容。
其它类似信息

推荐信息