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

标签 javascript jquery html css padding

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

在下面的示例中,div.video-wrapper 生成 padding-top75%。因为这个值会在加载时自动生成(并且会不断变化),所以我无法手动应用这个确切的 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>

最佳答案

您可以将.thumbnail-inner-containerstyle.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>

关于javascript - 从 parent 到 child 应用相同的填充值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51776608/

相关文章:

javascript - Vue 3 - inject() 只能在 setup() 或功能组件内部使用

javascript - 使用 Node.js 回调的次数较少

javascript - Kendo Grid 页面更改禁用其他 jquery

javascript - JS 定位特定 div 中的图像,即使它们共享类

Javascript Google Chrome 扩展,寻找域名,而不是应用程序 ID

javascript - 不起作用,在 html 中显示 javascript 变量

javascript - jquery合并两个对象

jQuery 隐藏/显示复选框消息

javascript - 在表上保存隐藏数据的正确方法是什么?

javascript - 动画后无法移动网页中的文字