我尝试了此代码,但在调试测试中未为与表标签相关联的属性定义属性,因此表是否支持该属性,或者我的代码有错误?
<!DOCTYPE html>
<html>
<head>
<title>data attribute on table</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
}
th, td {
padding: 5px;
}
</style>
<script>
function testData() {
var tableElement = document.getElementById("table");
var test = tableElement.getAttribute("test");
}
</script>
</head>
<body onload="testData()";>
<table id="tableElement" data-test="test">
</table>
</body>
</html>
最佳答案
您的功能有问题。
我通常通过将变量的名称与对象的id值进行匹配来简化操作。因此,表的id也是var的名称tableElement
。
当您要检索(获取)单个data-*
属性时,它通常是一个与属性名称完全一样的字符串,就像使用.getAttribute("data-test")
的函数一样。
如果要像使用jQuery的data-*
或JS .data
一样检索.datalist
列表,则像在原始代码中一样删除data-
。
如果名称中有2个或更多-
,则将采用驼峰式。 data-test-my-table
将是testMyTable
data-*
属性命名语法上的Details。
片段
function testData() {
var tableElement = document.getElementById("tableElement");
var test = tableElement.getAttribute("data-test");
//Just for demo (optional)
console.log('data-test: ' + test);
var out1 = document.getElementById('out1');
out1.value = test;
//~~~~~~~~~~~~~~
return test;
}
<!DOCTYPE html>
<html>
<head>
<title>data attribute on table</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
</head>
<body onload="testData()">
<table id="tableElement" data-test="test">
</table>
<!---Optional--->
<output id="out1"></output>
<!------------->
</body>
</html>