Javascript 获取html DOM元素内容周围的边框

我试图捕获像firefox inspector这样的html元素，所以我在jquery（）中编写了几行代码

但在某些情况下（如测试1、5、6、7和9），它不起作用

有什么建议吗

谢谢

代码

jquery

---

如果只想“突出显示”元素的内容（与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()
});

---

矩形出现在远离文本的地方的可能原因是

div

被呈现为块元素，但

test2

文本的情况并非如此，因为它显示在

span

标记中，该标记是

内联块

元素

我的建议是将文本的div

test1

呈现为

inline block

元素，或者将宽度设置为

div

内部文本的大小

实时代码@Jsfiddle

Html代码：

<div style= "width:35px;" class="ele">test 1</div> //set to fixed width
<span  class="ele">test 2</span>

test 1//设置为固定宽度
测试2

MDN链接：

---

位置：绝对：10

？？？为什么不设置为CSS规则：

.ele:hover{outline:1px solid#000；}

这与在chrome@A.Wolff中检查元素（未测试FF）时提供相同的视觉行为，方法是在整个元素周围使用outline-make边框，我只需要概述元素的内容。所以chrome inspector和FF one之间的行为有所不同，但似乎很奇怪。对不起，但实际上我无法在FF上测试它，可能以后我有FF 38.0.5，它不适用于多行文本。看见

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

$('.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()
});

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

<div style= "width:35px;" class="ele">test 1</div> //set to fixed width
<span  class="ele">test 2</span>