如何通过JavaScript获取HTML阴影元素的尺寸

How get dimension of HTML shadow element via JavaScript

本文关键字：元素 阴影 HTML 何通过 JavaScript 获取      更新时间：2023-09-26

我通过纯CSS3显示工具提示，但我唯一的问题是工具提示的内容确实有不同的长度。有的只有一行，有的长达4行。

现在这些工具提示阴影DOM元素，所以我怎么能得到(不同的)这些工具提示的高度通过JavaScript(或纯CSS解决方案会更好(也许CSS calc?))来调整所有的工具提示有从锚元素的边距?

HTML: 

<a href="#" data-title="This is one example tooltip">Test #1</a>
<a href="#" data-title="This is one example tooltip - This is one example tooltip [...]">Test #2</a>
CSS: 

a:before {
    content: attr(data-title);
    position: absolute;
    background: blue;
    padding: 7px 10px;
    width: 440px;
    max-height: 72px;
    text-align: left;
    line-height: 18px;
    margin: 0 0 0 0;
    opacity: 0;
    color: white;
    transition: opacity 0.15s ease-out 0.25s, margin-top 0.15s ease-out 0.25s;
}
a:hover:before {
    opacity: 1;
    margin-top: -40px;
    transition: opacity 0.2s ease-out 0.5s, margin-top 0.2s ease-out 0.5s;
}

现场演示:http://jsfiddle.net/qq3YJ/

这是jsfiddle的解决方案:http://jsfiddle.net/kwJz9/2/

我是这样做的:

  1. 使a相对，因此这意味着a:before元素将具有相对于其父元素a的位置。

  2. 为了将工具提示放在链接下面，我使用了bottom属性而不是margin-top。因为我用position: relative链接-这意味着bottom:0，例如它是当工具提示有它的下边框在父a的下边框的右边。

  3. 因为你想在链接下看到工具提示-在:hover中，我将bottom更改为1.4em，这是在文本下的一点点(.4em将是它们之间的距离)。

  4. 因为你想看到动画，我把transition改为包含bottom属性而不是'margin-top'

  5. 最后一个问题是，因为你有:before元素总是在html流-在第二个工具提示的情况下(这是大的)-它占用比a更多的空间，所以当你悬停它(不是链接)-你可以看到它。所以我也添加了visibility: hidden到:before元素，以确保如果鼠标将在它上面，你不会看到它。

相关文章：