從jQuery獲取css箭頭寬度

Question

我正在使用cssarrowplease在我的元素左側生成一個箭頭。這個元素是一個工具提示，我試圖將它定位到其他元素。我需要知道箭頭的寬度，所以我可以將它添加到工具提示left offset。我如何從jQuery獲得這個值？

編輯

.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

如果你使用真正的DIV和風格它是一個箭頭，而不是使用：前：後？ jQuery無法獲取寬度：before，：after之後，爲了獲得實際需要使用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>