脚本标签中的自定义属性

debugcn 发表于 Dev

调子

我可以在script标记中使用自定义属性吗？

<script type="text/javascript" mycustomattribute="foo">
    // JavaScript
</script>

然后使用所包含的JavaScript来访问mycustomattribute？的值。

TJ人群

我可以在脚本标记中使用自定义属性，例如：

是的，使用data-*属性：

<script data-info="the information"...

然后使用所包含的javascript访问“ mycustomattribute”的值吗？

很可能是。如果为script标签提供id，则可以可靠地做到这一点：

var info = document.getElementById("theId").getAttribute("data-info");

否则，您必须对脚本标签进行假设。如果它始终在页面的标记中（以后不使用代码添加），则可以执行以下操作：

var scripts = document.getElementsByTagName("script");
var info = scripts[scripts.length - 1].getAttribute("data-info");

这是因为如果脚本标记在标记中，它将在遇到标记时立即运行（除非async或defer已使用[[并且受浏览器支持]），并且它将始终是页面上的最后一个脚本标记（在该时间点）。但是同样，如果代码稍后使用createElement和添加appendChild类似标记来添加脚本标记，则不能依赖于此。

这是一个完整的示例：实时复制

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Data on Script Tags</title>
</head>
<body>
  <script>
    function display(msg) {
      var p = document.createElement('p');
      p.innerHTML = String(msg);
      document.body.appendChild(p);
    }
  </script>
  <script data-info="first">
    (function() {
      var scripts = document.getElementsByTagName("script");
      var info = scripts[scripts.length - 1].getAttribute("data-info");
      display("Got info '" + info + "'");
    })();
  </script>
  <script data-info="second">
    (function() {
      var scripts = document.getElementsByTagName("script");
      var info = scripts[scripts.length - 1].getAttribute("data-info");
      display("Got info '" + info + "'");
    })();
  </script>
</body>
</html>