圍繞任意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範圍繪製輪廓

回答

相關問題