获取html DOM元素内容的边框
16lz
2021-01-22
I am trying to capture html element like firefox inspector,so I wrote few lines of code in jquery (http://jsfiddle.net/fbkxj69b/5/).
我试图捕获像firefox检查器一样的html元素,所以我在jquery中写了几行代码(http://jsfiddle.net/fbkxj69b/5/)。
But it is not working for some cases (such as test 1, 5, 6, 7 & 9).
但它不适用于某些情况(例如测试1,5,6,7和9)。
Any suggestions ?
有什么建议 ?
Thanks
Code
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;
}
2 个解决方案
#1
2
You could use following logic if you want only to 'highlight' element's content (different than chrome browser inspector):
如果您只想“突出显示”元素的内容(与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-
更多相关文章
- 获取JavaScript数组元素的最大长度
- 是否有办法阻止contenteditable的插入符号出现在IE10的元素上?
- 获取拆分字符串数组的最后一个元素
- CSS3(jQUery?)当它悬停时隐藏元素“a”,这样就可以显示元素“b”
- 停止鼠标用javascript双击某些元素
- 在量角器中检索子元素的数组
- 从Python中的列表元素中删除URL
- python selenium-webdriver 定位frame中的元素 (十三)
- Django模型选择:使用元组的第一个元素