javascript - 如何最好地将元素名称附加到每个 HTML 元素？

Question

CSS ::after 结合 content 和 attr() 有一个很好的特性，它允许你插入任何 attr 值作为伪元素内容。

出于一般调试目的，我希望将一个黄色小标签附加到所有 HTML 元素，并将内容作为元素名称。

我可以用 CSS 做 id 和类。

但是对于元素(p div span 等)javascript 是唯一的选择吗？

Answer 1

是的，您必须使用 javascript 或 jQuery 来简化操作: DEMO

HTML 测试

<div>
</div>
<p></p>
<form></form>  
<span></span>

CSS 测试

[data-tag]:before {content:attr(data-tag);}

j查询

$("body").children().each(function() {
  var domel= $(this).get(0);
  $(this).attr("data-tag",domel.nodeName);
})

它产生这个:

<div data-tag="DIV"></div>