[原] 在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>

显示效果：