javascript实现firefox调试器复制唯一选择器功能

  firefox的调试器,右键点击dom对象后有一个右键功能“复制唯一选择器”,点击这个菜单后系统剪贴板中将会存储此dom对象的唯一css选择器,如下下图所示。

javascript实现firefox调试器复制唯一选择器功能

  测试下了firefox调试器复制唯一选择器功能规则应该这样,通过遍历父元素(包含自己),碰到第一个id选择类,或者碰到第一个包含class属性,并且 document.getElementsByClassName(IE8-不支持,你要兼容ie8-只能遍历所有元素来对比样式)返回的元素集合只有一个元素的样式作为开始,如果不符合这2项,则添加>nth-child 样式。

 

  javascript实现firefox调试器复制唯一选择器功能源代码如下。

<div>afefe
    <div id="dv">sss</div>
    <div>
        <div>fejf</div>
    </div>
</div>
<script>
    function getElementsByClassName(el, cls) {//兼容IE8-,不支持getElementsByClassName方法
        if (el.getElementsByClassName) return el.getElementsByClassName(cls);
        var nodes = [];
        var eles = el.getElementsByTagName('*');
        var rx = new RegExp('(^| )'+cls+'( |$)');
        for (var i in eles)
            if (eles[i].className && rx.test(eles[i].className)) nodes.push(eles[i]);
        return nodes;
    }
    function getOnlyCss(dom, path) {
        if (!dom) return '';
        var currentCls = '', end = false;
        if (dom.id) { currentCls = '#' + dom.id; end = true }//id
        else {
            var cls, pNode;
            if (cls = dom.className) {//判断样式
                var arr = cls.split(' ');
                for (var i = 0; i < arr.length; i++)
                    if (arr[i] && getElementsByClassName(document, arr[i]).length == 1) { currentCls = '.' + arr[i]; end = true; break; }
            }
            if (!currentCls) {
                if (dom.tagName == 'BODY') { currentCls = 'body'; end = true; }
                else {
                    var nodes = dom.parentNode.getElementsByTagName('*');
                    for (var i = 0; i < nodes.length; i++) if (nodes[i] == dom) { currentCls = dom.tagName.toLowerCase() + ':nth-child(' + (i + 1) + ')'; break; }
                }
            }
        }
        currentCls = currentCls + (path ? ' > ' + path : '');
        return end ? currentCls : getOnlyCss(dom.parentNode, currentCls);
    }
    var dv = document.getElementsByTagName('div');
    alert(getOnlyCss(dv[dv.length - 1]));//body > div:nth-child(1) > div:nth-child(2) > div:nth-child(1)
    alert(getOnlyCss(document.getElementById('dv')));//#dv
</script>

 


原创文章,转载请注明出处:javascript实现firefox调试器复制唯一选择器功能

评论(0)Web开发网
阅读(149)喜欢(0)不喜欢(0)JavaScript/Ajax开发技巧