您所在的位置:小祥子 » 编程 » JavaScript » 正文

在文档中添加标签名、ID、类名

时间:2015-08-11 编辑:木子鸡 来源:CnBlogs

使用 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>

显示效果:

关键词:标签