リビジョンバー/マーカーをマージンでCSSを使用して作成する

Question

私は文書を持っているので、リビジョンバー（変更箇所を示す黒いバー）を使用して変更を追跡する必要があります。

変更されたテキストが<span class="changeText">.

例のコードを使用して行われ、下に：

<p>This is the original text. This is the original text. This is the original text. This 
is the original text. This is the original text. <span class="changeText">This text has 
changed. This text has changed. This text has changed.</span> This is the original text. 
</p> 

私がブロックのように変更されたテキストを扱う場合、私はこれを行うことができますが、私は必要インラインになるように変更されます。 （画像は所望のサンプル出力を提供する）。

私たちの意見は高く評価されます。

ありがとうございます！ JavaScriptで

Answer 1

ここで説明したように、あなたは、プロパティoffsetTopとその親からのオフセット要素を取得することができます：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

これは、要素の高さとともに、offsetHeightを用いて回収、することができあなたが黒のマーカーを描くために必要なもの：だから

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

を、例えば、あなたが使用することができます。

document.getElementsByClassName("changeText").forEach(element => { 
    let top = element.offsetTop; 
    let height = element.offsetHeight; 
    drawMarker(top, height); 
} 

関数drawMarkerは、たとえば、指定されたデータを使用して絶対配置でdivを作成できます。

Answer 2

:beforeのcssタグで混乱することがあります。

私はまだ100％ではないんだけど、これは正しい方向への一歩かもしれません：

jsfiddle

私はスパンのため:beforeセレクタ追加：

.changeText:before { 
    position: absolute; 
    left: 50px; 
    background-color: black; 
    content: " "; 
    width: 10px; 
    height: 1em; 
} 

私たちを残りの問題は、バーの高さがハイライトされたテキストの高さと一致しないことです。私たちはこれを解決するためにいくつかのjavascriptを投げることができます。

最後の試み：jsFiddle

Answer 3

JavaScriptを使用.changeText要素の高さと位置を取得します。この情報を使って、黒いバーを作成することができます。 .changeText要素のjQueryオブジェクトをループに

var $body = $('body'); 
 
var $edit = $('.edit'); 
 

 
$edit.each(function (i, el) { 
 

 
    var $el = $(el); 
 
    var top = $el.position().top; 
 
\t var $bar = $('<div/>', { 
 
    class: 'edit-bar', 
 
    style: 
 
     'top:' + top + 'px;' + 
 
     'height:' + $el.height() + 'px;' 
 
    }); 
 
    
 
    $body.append($bar); 
 
    
 
});

body { 
 
    margin: 0; 
 
} 
 

 
p { 
 
    margin-left: 3rem; 
 
} 
 

 
.edit { 
 
    background-color: yellow; 
 
} 
 

 
.edit-bar { 
 
    position: absolute; 
 
    left: 10px; 
 
    border-left: 5px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cupiditate, eligendi delectus voluptas. Dolore laborum nostrum consectetur incidunt, debitis animi eum vel expedita amet deleniti eaque sed voluptates, consequuntur ut. <span class="edit">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cupiditate, eligendi delectus voluptas. Dolore laborum nostrum consectetur incidunt, debitis animi eum vel expedita amet deleniti eaque sed voluptates, consequuntur ut.</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cupiditate, eligendi delectus voluptas. Dolore laborum nostrum consectetur incidunt, debitis animi eum vel expedita amet deleniti eaque sed voluptates, consequuntur ut. 
 
</p> 
 
<p> 
 
Sapiente cupiditate, eligendi delectus voluptas. Dolore laborum nostrum consectetur incidunt, debitis animi eum vel expedita amet deleniti eaque sed voluptates, consequuntur ut. <span class="edit">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cupiditate, eligendi delectus voluptas.</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente cupiditate, eligendi delectus voluptas. 
 
</p>

使用each()：ここではjQueryを使用した例です。それぞれについて、height()とposition()を持つ.changeText要素の高さと位置を調べます。次に、bar要素を作成し、それをページに追加します。

黒いバーは絶対配置されていることに注意してください。最終的なコードには、position: relative;を適用する必要があるコンテナ要素がありますので、バーが必要な場所に表示されます。また、黒いバーを配置するために、p要素で余白を作成しました。繰り返しますが、これは最終コードで変更される可能性があります。このスペースは、他の要素のマージンまたはパディングで作成することもできます。