javascript - 从 parent 到 child 应用相同的填充值？

Question

如何使用 JQuery 将父元素中的 padding-top 值应用到其中的子 div？

在下面的示例中，div.video-wrapper 生成 padding-top 值 75%。因为这个值会在加载时自动生成(并且会不断变化)，所以我无法手动应用这个确切的 padding-top 值；因此，我正在寻找 JQuery 解决方案。

简而言之，我希望将 div.video-wrapper 中的 padding-top 值应用到类为 thumbnail-inner- 的 div容器。

这是生成的 HTML 的示例:

<div class="video-wrapper" style="padding-top: 75%;">
    <div class="thumbnail-outer-container">
        <div class="thumbnail-inner-container">
            <a href="#" class="yt-hd-thumbnail yt-hd-thumbnail-darken">
                <img src="https://i.ytimg.com/vi/xxxxxxxxxxx/hqdefault.jpg">
            </a>
            <iframe id="youtube_iframe" src="https://www.youtube.com/embed/xxxxxxxxxxx?feature=oembed&amp;enablejsapi=1&amp;origin=https://safe.txmblr.com&amp;wmode=opaque" allow="autoplay; encrypted-media" allowfullscreen="" name="fitvid0" class="yt-hd-thumbnail" frameborder="0"></iframe>
        </div>
    </div>
</div>

Answer 1

您可以将.thumbnail-inner-container的style.paddingTop设置为.video-wrapper的样式.paddingTop.

<div class="video-wrapper" style="padding-top: 75%;">
    <div class="thumbnail-outer-container">
        <div class="thumbnail-inner-container">
            <a href="#" class="yt-hd-thumbnail yt-hd-thumbnail-darken">
                <img src="https://i.ytimg.com/vi/xxxxxxxxxxx/hqdefault.jpg">
            </a>
            <iframe id="youtube_iframe" src="https://www.youtube.com/embed/xxxxxxxxxxx?feature=oembed&amp;enablejsapi=1&amp;origin=https://safe.txmblr.com&amp;wmode=opaque" allow="autoplay; encrypted-media" allowfullscreen="" name="fitvid0" class="yt-hd-thumbnail" frameborder="0"></iframe>
        </div>
    </div>
</div>
<script>
document.getElementsByClassName("thumbnail-inner-container")[0].style.paddingTop = document.getElementsByClassName("video-wrapper")[0].style.paddingTop;
</script>