能否在script标签中以属性形式添加自定义变量？

可以像示例那样在script标签里添加自定义属性，但这不属于HTML标准规定的script标签属性范畴。不过浏览器不会对此报错，你完全可以通过JavaScript获取这些自定义属性的值来实现变量传递。

获取自定义属性的方法 #

针对你给出的示例代码：

<script src="page.js" variable1="Rome"></script>

在page.js中可以这样获取属性值：

// 获取当前正在执行的script标签
const currentScript = document.currentScript;
// 提取自定义属性的值
const variable1 = currentScript.getAttribute('variable1');
console.log(variable1); // 输出 "Rome"

更规范的替代方案 #

虽然自定义属性能用，但更推荐两种标准且语义化的实现方式：

• *使用data-属性：这是HTML5专门为自定义数据属性设计的规范，兼容性更好，也更符合代码语义：

  <script src="page.js" data-variable1="Rome"></script>
  

  获取方式也更简洁：

  const currentScript = document.currentScript;
  const variable1 = currentScript.dataset.variable1;
  

• 提前声明全局变量：如果不需要变量和script标签绑定，可在引入脚本前直接定义全局变量：

  <script>
    const variable1 = "Rome";
  </script>
  <script src="page.js"></script>
  

  这样在page.js里就能直接使用variable1变量。

内容的提问来源于stack exchange，提问作者Shamss Zaidan