Question

我正在寻找一种在HTML文档中围绕任意范围绘制outline的方法。即我想做的事情：

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选择器上的边框或大纲。

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

假设：

注意：我只需要在主机程序弹出一个菜单时暂时发生这种情况，之后它会再次消失，因此在绘制矩形或添加到文档中的更多内容之后忽略诸如窗口滚动之类的内容是安全的等

Answer 1

这可能是使用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/

一种解决方案是将感兴趣的元素包装在<div>中并应用样式来显示轮廓。

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

我可以通过一些反馈来调整它。

Answer 2

在这里小提琴：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');

在任意html范围周围绘制轮廓

2 个答案: