3

我正在寻找一种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选择器上的边框或轮廓。

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

假设：

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

4

2 回答 2

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/

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

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

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

于 2013-03-21T14:55:34.087 回答
1

小提琴在这里：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-21T14:58:18.363 回答