我尝试了此代码,但在调试测试中未为与表标签相关联的属性定义属性,因此表是否支持该属性,或者我的代码有错误?

<!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>

10-07 19:42
查看更多