鼠标高亮div边框并读取xpath

dhso
2018/05/03 01:10
统计中

插入style节点方法

function addCssByStyle(cssString) {
    var doc = document;
    var style = doc.createElement("style");
    style.setAttribute("type", "text/css");

    if (style.styleSheet) { // IE
        style.styleSheet.cssText = cssString;
    } else { // w3c
        var cssText = doc.createTextNode(cssString);
        style.appendChild(cssText);
    }

    var heads = doc.getElementsByTagName("head");
    if (heads.length)
        heads[0].appendChild(style);
    else
        doc.documentElement.appendChild(style);
}

插入节点

addCssByStyle(".hover-red:hover {outline: 1px solid red;}")

读取xpath方法

function readXPath(element) {
    if (element.id !== "") { //判断id属性,如果这个元素有id,则显 示//*[@id="xPath"]  形式内容
        return '//*[@id=\"' + element.id + '\"]';
    }
    //这里需要需要主要字符串转译问题,可参考js 动态生成html时字符串和变量转译(注意引号的作用)
    if (element == document.body) { //递归到body处,结束递归
        return '/html/' + element.tagName.toLowerCase();
    }
    var ix = 1, //在nodelist中的位置,且每次点击初始化
        siblings = element.parentNode.childNodes; //同级的子元素

    for (var i = 0, l = siblings.length; i < l; i++) {
        var sibling = siblings[i];
        //如果这个元素是siblings数组中的元素,则执行递归操作
        if (sibling == element) {
            return arguments.callee(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (ix) + ']';
            //如果不符合,判断是否是element元素,并且是否是相同元素,如果是相同的就开始累加
        } else if (sibling.nodeType == 1 && sibling.tagName == element.tagName) {
            ix++;
        }
    }
};

鼠标事件

$('*').mouseover(function(e) { $(this).addClass("hover-red");
    e.stopPropagation();
    alert(readXPath(this)); })

本文为 dhso 原创

发布在 http://blog.minws.com/shu-biao-gao-liang-divbian-kuang-bing-du-qu-xpath/

如有转载,请标明来源!

作者信息
姓名:dhso
热评文章
最新评论
文章概览