Question

我正在尝试捕获像firefox检查器这样的html元素，所以我在jquery（http://jsfiddle.net/fbkxj69b/5/）中编写了几行代码。

但它不适用于某些情况（例如测试1,5,6,7和9）。

有什么建议吗？

由于

代码

jquery的

$(document).ready(function () {
    $('.ele').mouseenter(function () {
        getCaptured(this);
    }).mouseleave(function () {
        $('.bline').removeAttr('style');
    });
});

function getCaptured(obj){
    var pos = obj.getBoundingClientRect();
    var txt_lleft = ((pos.width - $(obj).textWidth()) / 2) + pos.left;
        var txt_rleft = pos.width - txt_lleft + (pos.left * 2);
           var top = pos.top + $(window).scrollTop();
    var b = 1;

        $('#top').css({ top: Math.max(0, top - b), left: txt_lleft - b, width: $(obj).textWidth() + b, height: b });
        $('#bottom').css({ top: top + pos.height, left: txt_lleft - b, width: $(obj).textWidth() + b, height: b });
        $('#left').css({ top: top - b, left: Math.max(0, txt_lleft - b), width: b, height: pos.height + b });
        $('#right').css({ top: top - b, left: txt_rleft, width: b, height: pos.height + (b * 2) });
}

$.fn.textWidth = function () {
    var html_org = $(this).html();
    var html_calc = '<span id="ipSpnToGetTxtWdth">' + html_org + '</span>';
    $(this).html(html_calc);
    var width = $(this).find('span#ipSpnToGetTxtWdth').width();
    $(this).html(html_org);
    return width;
};

HTML 的

<div class="ele">test 1</div>

<span class="ele">test 2</span>

<div style="margin-left: 10px;">
<span class="ele">test 3</span>
</div>

<div style="margin-left: 10px;">
<span style="margin-left: 20px;" class="ele">test 4</span>
</div>

<div style="position: absolute; left: 10px; top: 20px;">
<h4 class="ele">test 5</h4>
</div>

<div style="margin-left: 10px; margin-top: 20px;">
<div style="position: absolute; left: 10px; top: 20px;">
<h4 class="ele">test 6</h4>
</div>
</div>

<h4 class="ele">test 7</h4>

<div style="text-align: center; width: 100%;">
<h4 class="ele">test 8</h4>
</div>

<div style="margin-left: 20px; width: 70%;">
<p class="ele">test 9 test 9 test 9 test 9 test 9 test 9 </p>
</div>


<div class="bline" id="top"></div>
<div class="bline" id="bottom" ></div>
<div class="bline" id="left" ></div>
<div class="bline" id="right" ></div>

CSS

.bline {
    background: #000;
    position: absolute;
    z-index: 1000000;
}

Answer 1

如果您只想突出显示＆＃39>，则可以使用以下逻辑元素的内容（与Chrome浏览器检查器不同）：

jQuery的：

$('.ele').hover(function () {
    $(this).contents().wrapAll('<span class="highlight"/>');
    /*↑↑↑ could bring invalid HTML if wrapping block element inside SPAN  */
}, function () {    
    $(this).find('.highlight').contents().unwrap()
});

CSS：

.highlight {
    outline: 1px solid #000;
}

-jsFiddle-

Answer 2

矩形远离文本显示的可能原因是因为div被渲染为块元素，但test2文本的情况并非如此，因为它在{{1}内显示标签是span元素。

我的建议是将文本div inline-block渲染为test1元素，或将宽度设置为inline-block内部文本的大小。

直播代码@ Jsfiddle

http://jsfiddle.net/dreamweiver/fbkxj69b/14/

Html代码：

div

MDN链接： https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

快乐编码：）

获取html DOM元素内容的边框

2 个答案:

-jsFiddle-