围绕任意html范围绘制轮廓

我正在寻找一种在HTML文档中围绕任意范围绘制outline的方法。即我想这样做：围绕任意html范围绘制轮廓

var start=document.getElementById('foo'); 
var end=document.getElementById('bar'); 
var range = document.createRange(); 
range.setStart(start, 0); 
range.setEnd(end, 0);

，然后有一个outline出现角落找寻range。

我到目前为止看过以下方法： 1）document.execCommand但遗憾的是，似乎只能通过此方法应用背景或前景色，而不是任何类型的边框或轮廓。 2）设置range作为文档selection，但貌似css不允许::selection选择器上的边框或轮廓。

有没有人知道这种方式，这可能是通过上述或其他方法（S）？也许有可能以某种方式计算文本区域，然后用一个画布或一个或多个绝对位置的div来绘制它。

假设：

注：我只需要这个临时发生的，而菜单从主机程序，之后它再次dissapear弹出，因此它是安全的忽略的东西像窗口绘制后滚动矩形或更多内容添加到文档等。

来源

2013-03-21 Malcolm MacLeod

这可能是使用jQuery获取感兴趣的元素的解决方案的开始。

示例代码：

<div class="container"> 
    <p>This is some text...</p> 
    <p class="foo">This is some text...</p> 
    <p>This is some text...</p> 
    <p>This is some text...<b>with bold</b></p> 
    <p class="bar">This is some text...</p> 
    <p>This is some text...</p> 
    <p>This is some text...</p>  
</div>

和一些CSS：

.outline { 
    outline: 1px solid blue; 
}

jQuery的样子：

var lastElm = $(".bar"); 
$(".foo").nextUntil(lastElm).add(lastElm).wrapAll('<div class="outline" />');

我成立了一个小提琴演示：http://jsfiddle.net/audetwebdesign/cf9V8/

一个sol使用方法是将感兴趣的元素包装在<div>中，并应用样式来显示轮廓。

但是，当您的开始/结束元素位于不同的块中时，您需要考虑这种情况。在这种情况下，包装可能会破坏布局。

我可以调整一些反馈。

来源

2013-03-21 14:55:34

谢谢，我怀疑这将会遇到一些问题，涉及更多复杂的边缘案例，涉及块等。正如你所说，但是我会尝试在应用程序内部，看看它真的有多大的问题......只需将它转换为常规的JS就快速首先，可悲的是，该应用程序似乎并没有与jQuery的工作。 – 2013-03-21 18:30:26

@MolcolmMacLeod我不确定你指的是什么应用程序，所以我不能提供任何建议没有更多的细节。但是，如果您获得了使用jQuery的原型，JavaScript程序员可以使用相同的功能编写代码。如果您有一些在真实世界中可能遇到的示例HTML，那将有助于测试jQuery原型。请随时通知我们。祝你好运！ – 2013-03-21 19:58:43

小提琴这里：http://jsfiddle.net/AmQbx/

一个简单的方法（不干净的），这样做的是：

获得的第一个元素的位置和最后一个元素：

var startElem = $('#foo'), 
    startPos = startElem.position(), 
    endElem = $('#bar').position(), 
    endPos = endElem.position();

建立一个新的DIV从头到尾如此延伸：

var selection = $('<div/>').css({ 
    'z-index': 1000; 
    position: absolute, 
    background: none, 
    border: '1px solid #F00', 
    top: startPos.top, 
    left: startPos.left, 
    width: startElem.css('width').replace('px',''), 
    height: (endPos.top + parseFloat(endElem.css('height').replace('px',''))) - startPos.top 
}).appendTo('body');

来源

2013-03-21 14:58:18

在这种方法中，概述的元素被从文档的流程中提取出来，我发现它很有用，也很有趣。 – 2013-03-21 15:03:56

Hrm，我想三个错误。 1）用于endElem变量的额外的.position（）2）由于短划线，'z-index'需要被转义3）缺少高度线上的大括号。 - 尽管我似乎无法让它做任何事情，但我对jQuery不太熟悉，所以也许我错过了一些明显的东西。 – 2013-03-21 17:57:35

@MalcolmMacLeod小提琴在这里：http://jsfiddle.net/AmQbx/ – 2013-03-21 19:22:36

围绕任意html范围绘制轮廓

回答

相关问题