jQueryからCSSの幅の幅を取得

Question

私は要素の左側に矢印を生成するためにcssarrowpleaseを使用しています。この要素はツールチップで、他の要素に配置しようとしています。矢印の幅を知る必要があるので、ツールチップにオフセットを追加することができます。 jQueryからこの値を取得するにはどうすればよいですか？あなたは、実際のDIVとスタイルを使用している場合、それは代わりに使用しての矢印は何だ

EDIT

.tooltip { 
    position: absolute; 
    z-index: 6000; 
    background: rgba(50, 50, 50, .8); 
    border: 2px solid rgba(50, 50, 50, .8); 
    color: white; 
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3); 
} 

.tooltip:after, .tooltip:before { 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
    left: 100%; 
    top: 50%; 
} 

.tooltip:before { 
    border-color: rgba(150, 40, 40, 0); 
    border-width: 8px; 
    margin-top: -8px; 
    border-left-color: rgba(50, 50, 50, .8); 
} 

.tooltip:after { 
    border-color: rgba(180, 60, 60, 0); 
    border-width: 5px; 
    margin-top: -5px; 
    border-left-color: rgba(50, 50, 50, .8); 
} 

Answer 1

：前：後？ jQueryは幅を取得することができません：before、：after、widthを取得するには実際にdivを矢印として使用する必要があります。

以下の例。

var widthLeft = parseInt($(".arrow").css("border-left-width").replace("px","")); 
 
var widthRight = parseInt($(".arrow").css("border-right-width").replace("px","")); 
 
var width = widthLeft + widthRight + "px"; 
 
console.log(width)

.tooltip { 
 
    position: absolute; 
 
    z-index: 6000; 
 
    background: rgba(50, 50, 50, .8); 
 
    border: 2px solid rgba(50, 50, 50, .8); 
 
    color: white; 
 
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3); 
 
} 
 

 
.arrow { 
 
    border: solid transparent; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    left: 100%; 
 
    top: 50%; 
 
    border-color: rgba(150, 40, 40, 0); 
 
    border-width: 8px; 
 
    margin-top: -8px; 
 
    border-left-color: rgba(50, 50, 50, .8); 
 
}

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

 
<div class="tooltip"> 
 
<div class="arrow"></div> 
 
text 
 
</div> 
 
</div>