3

outlineHTML ドキュメント内の任意の範囲を囲む方法を探しています。つまり、次のようなことをしたいと思います:

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ドキュメントとして設定しますが、CSSではセレクターselectionに境界線やアウトラインを許可していないようです。::selection

上記または他の方法のいずれかを介して、これが可能になる方法を知っている人はいますか? おそらく、何らかの方法でテキスト領域を計算し、キャンバスまたは 1 つ以上の絶対配置 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/

1 つの解決策は、目的の要素を でラップし<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 に答える