[原] 在HTML文档中添加标签名、ID、类名
[版权声明] 自由转载-非商用-非衍生-保持署名 (CC BY-NC-ND 3.0)
[发表日期] 2015年08月11日 07:00 @欢乐小匠仙
[原文地址] http://leeyee93.cnblogs.com/p/4719873.html
使用 Brackets 实时预览功能调试 CSS 样式时,添加如下代码到页面,可以帮助制定选择器。
CSS样式:
<style> small { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: normal; line-height: 1; color: #468847; text-align: center; white-space: nowrap; vertical-align: baseline; background-color: #dff0d8; border-radius: 10px; font-family: Consolas,"Courier New",monospace; } </style>
JS代码:
<script src="js/jquery-1.10.2.min.js"></script> <script> $(function () { // 在文档中添加标签名、ID、类名 $( 'div, h1, h2, h3, p, ul, li, blockquote' ).prepend( function() { tagName = $( this ).prop( 'localName' ); tagID = $( this ).prop( 'id' )? '#' + $( this ).prop( 'id' ) + ' ' : ''; tagClass = $( this ).prop( 'className' )? '.' + $( this ).prop( 'className' ) : ''; tagData = $( this ).attr( 'data-album' )? '[data-album=' + $( this ).attr( 'data-album' ) + ']' : ''; return '<small>' + tagName + tagID + tagClass +'</small> '; } ); }); </script>
显示效果:
--- 日间工夫觉纷扰,则静坐。觉懒看书,则且看书。是亦因病而药。处朋友,务相下则得益,相上则损。(《传习录(上卷)·陆澄录》) ---