如何使用 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&enablejsapi=1&origin=https://safe.txmblr.com&wmode=opaque" allow="autoplay; encrypted-media" allowfullscreen="" name="fitvid0" class="yt-hd-thumbnail" frameborder="0"></iframe>
</div>
</div>
</div>
最佳答案
您可以将.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&enablejsapi=1&origin=https://safe.txmblr.com&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/