javascript - 为什么标签中有一些未知的属性

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 8 年前。

Improve this question

我对网页设计还很陌生，正在使用 bootstrap 进行 javascript 设计，但时不时地，我可以在标签中找到一些似乎在任何地方都不支持的属性。我真的很困惑。

例如:以下关于“nav”标签的代码

<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas"     role="navigation">
  <a class="navmenu-brand" href="#">Brand</a>
<ul class="nav navmenu-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

为什么我们可以为“nav”标签添加“role”属性？我已经搜索了所有可能的资源: http://www.w3schools.com/tags/tag_nav.asp建议“nav”支持[HTML 中的全局属性。] 和[HTML 中的事件属性。]，但“Angular 色”都不在其中。

我只是想知道我们如何添加看似随意不允许的属性？

有人可以帮忙解释一下 bootstrap javascript 匹配是如何工作的吗？只需添加 data-toggle 和 data-target，我们就可以对某些目标产生某些积极的效果？

Answer 1

Bootstrap 有 jquery 插件，可以解析页面并使用这些 data-xxxx 属性通过处理程序来检测其元素。尽管创建自己的属性并不总是一个好主意(通常智能感知会犹豫，除非您添加“data-”或“x-”前缀)，但没有什么可以阻止您这样做。它对 DOM 没有任何意义，但 Javascript 和 jQuery 仍然可以使用它们，就好像它们是有效属性一样。