Javascript 脚本标记中的自定义属性_Javascript_Html

Javascript 脚本标记中的自定义属性
javascript html
Javascript 脚本标记中的自定义属性,javascript,html,Javascript,Html,我是否可以在脚本标记中使用自定义属性，例如： <script type="text/javascript" mycustomattribute="foo"> // JavaScript </script> //JavaScript 然后使用包含的JavaScript访问mycustomattribute？的值，您应该能够使用jquery获得该值 $("script").attr("mycustomattribute"); 或者尝试使用常规JavaScrip
我是否可以在
脚本标记中使用自定义属性，例如：
<script type="text/javascript" mycustomattribute="foo">
    // JavaScript
</script>


//JavaScript

然后使用包含的JavaScript访问mycustomattribute
？
的值，您应该能够使用jquery获得该值
$("script").attr("mycustomattribute");

或者尝试使用常规JavaScript
document.getElementsByTagName("script")[0].getAttribute("mycustomattribute");

可能需要给脚本标记一个id才能执行此操作
document.getElementById("someId").getAttribute("mycustomattribute");

是的，你能做到。浏览器需要忽略它们在任何标记中都无法识别的属性（以便在文档与旧浏览器一起使用新功能时能够优雅地降级）。
但是，最好使用dataset标记，因为这些标记是显式保留给用户的，所以它们不会与将来的HTML更改冲突
<script id="myscript" type="text/javascript" data-mycustomattribute="foo">

或与：
（但请参见文档中的浏览器兼容性表）
我是否可以在脚本标记中使用自定义属性，例如：
<script type="text/javascript" mycustomattribute="foo">
    // JavaScript
</script>

是的，使用：
否则，您必须对脚本标记进行假设。如果它始终位于页面的标记中（以后不使用代码添加），则可以执行以下操作：
var scripts = document.getElementsByTagName("script");
var info = scripts[scripts.length - 1].getAttribute("data-info");

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

脚本标记上的数据
功能显示（msg）{
var p=document.createElement（'p'）；
p、 innerHTML=字符串（msg）；
文件.正文.附件（p）；
}
（功能（）{
var scripts=document.getElementsByTagName（“脚本”）；
var info=scripts[scripts.length-1].getAttribute（“数据信息”）；
显示（“获取信息“+”信息“”）；
})();
（功能（）{
var scripts=document.getElementsByTagName（“脚本”）；
var info=scripts[scripts.length-1].getAttribute（“数据信息”）；
显示（“获取信息“+”信息“”）；
})();
我为这个实例构建了一个非常容易使用的：
<script id="your-library" src="./your-library.js" data-car="pagani" data-star-repo="yes, please :)">



然后你可以得到这些数据：
/**
 * This returns the following:
 *
 * {
 *   car: 'pagani',
 *   starRepo: 'yes, please :)'
 * }
 */

 ScriptTagData.getData('your-library');


 /**
  * This returns the juust <script> tag
  */

 ScriptTagData.getData('your-library');

/**
*这将返回以下内容：
*
* {
*汽车：“帕加尼”，
*斯塔雷波：“是的，请：）”
* }
*/
ScriptTagData.getData（'your-library'）；
/**
*这将返回juust标记
*/
ScriptTagData.getData（'your-library'）；

您可以通过Bower、CDN下载它，也可以只下载代码：
是的，没错，但这将是一个嵌入外部站点的脚本块，无法保证jquery的存在（这也是一个可行的解决方案。感谢您提供的额外方法！这并没有回答问题（如何在JS中访问属性）。@DannyBeckett他问的是“如果”，而不是“如何”。我假设他已经知道如何操作，只是想知道使用脚本标记是否有任何限制。举个例子来说明您的答案会很好。@RodrigoRubio完成。还添加了一个文档链接。我已经回答了您的问题，但您为什么要这样做？如果我们知道原因，我们可能会建议一个更好的选项。旁注：如果类型是text/javascript
，那么没有理由使用type
属性，这只是浪费了带宽。谢谢@T.J.Crowder。我正在写一篇“嵌入此葡萄酒评论”widget。目前我使用的是iframe，但我希望它能更好地与用户的网站布局相配合。因此，我使用javascript将代码写入页面。但我需要一种可靠的方式，让javascript能够使用用户的葡萄酒评论的唯一id。（例如，[链接]如果您需要属性来拥有唯一的id，为什么不使用id
属性呢？只是澄清一下：不是唯一的DOM元素id，而是唯一的wine id。在获取“last”时必须做出的假设中脚本，就是这样：@Alohci:Good link。这是我不喜欢到处乱扔脚本标签的众多原因之一，当然也不会嵌套在内容中（除了在结束标签之前）。我知道有些人喜欢这样做，包括一些你非常尊重的人（例如，谷歌关闭图书馆工程师），但这会导致类似的事情……请在发布图书馆更多问题之前进行回顾。
var scripts = document.getElementsByTagName("script");
var info = scripts[scripts.length - 1].getAttribute("data-info");

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

<script id="your-library" src="./your-library.js" data-car="pagani" data-star-repo="yes, please :)">

/**
 * This returns the following:
 *
 * {
 *   car: 'pagani',
 *   starRepo: 'yes, please :)'
 * }
 */

 ScriptTagData.getData('your-library');


 /**
  * This returns the juust <script> tag
  */

 ScriptTagData.getData('your-library');