Question

我正在使用cssarrowplease在元素的左侧生成一个箭头。这个元素是一个工具提示，我试图将它定位到其他元素。我需要知道箭头的宽度，以便我可以将其添加到工具提示左偏移。如何从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并将其设计为箭头而不是使用：before，：after后怎么办？ jQuery无法获得宽度：before，：之后，为了获得宽度，您实际上需要使用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>

从jQuery获取css箭头宽度

1 个答案: