jquery - 页面加载后检索和更新 CSS 值

Question

我觉得这应该得到一个直截了当的答案，但我没能找到它，所以如果我忽略了或无法找到任何以前的答案，我深表歉意。

我要实现的目标:更新元素相对于其流动宽度的高度。

我尝试做的 是获取元素的宽度，将其乘以我想要的比率以得出元素的正确高度。我将它传递给 (window).load 和 (window).resize 以便在页面加载后以及窗口和元素宽度变化时计算高度( elment 有 100% 宽度)重新计算该元素的高度。

这是我的代码:

var fn = ( function() {

    var player = $( '.rem_video_wrapper iframe[style]' ),
        w = player.css('width').slice(0,-2), // strip 'px'
        h = w * 0.6;

    player.css( 'height', h );

    // the following is for updating a <p> with current values
    // for troubleshooting purposes.
    var paragraph = $( '#var' );
    paragraph.text( w + ' (' + h + ')' );

});

$( window ).load( fn );
$( window ).resize( fn );

问题 我遇到的是，当页面加载时，w 似乎没有初始值，因此元素的高度没有设置为应有的高度. 但是，当我调整页面大小时它会启动并且元素开始正常运行。

如何让我的函数在我的页面完全加载后正确触发？我假设我的脚本在它甚至可以正确获取目标元素的宽度之前尝试运行。

我试过 $(document).ready(fn) 也没有用。

我只是最近才投入到 jQuery 中，所以我完全接受我以完全错误的方式处理我的代码，或者我一开始就问错了问题的可能性。请赐教!

谢谢

编辑:

这是我的相关标记。

注意:此标记由 Embedder 生成(Craft CMS 插件)和 reEmbed通过在我的 Craft CMS 模板文件中使用以下行:{{ craft.embedder.embed (entry.youtube) }} 其中 youtube 是一个包含 url 的字段所需的 YouTube 播放列表。

<div id="rem_playlist0" class="rem_playlist rem_inline_list rem_playlist_default" style="width: 459px; height: 399px;">

    <div class="rem_playlist_toolbar" style="display: block;">
        <span class="rem_playlist_title"></span>
        <span class="rem_playlist_actions">
            <span class="rem_playlist_skip_control previous disabled"></span>
            <span class="rem_playlist_info">
                <span class="rem_playlist_current">1</span>
                <span class="rem_playlist_divider">/</span>
                <span class="rem_playlist_total">27</span>
            </span>
            <span class="rem_playlist_skip_control next"></span>
            <a class="rem_toggle_inline_playlist" href="#">PLAYLIST</a>
        </span>
    </div>

    <div class="rem_video_wrapper">
        <iframe style="position: relative; width: 459px; height: 275.4px;" src="" allowfullscreen="" frameborder="0" data-rem-id="0"></iframe>
    </div>

    <ul class="rem_playlist_ul" style="margin-top: 25px; z-index: 10; display: none;">
        <li class="rem_playlist_list-item">"playlist item ..."</li>
        <li class="rem_playlist_list-item">"playlist item ..."</li>
        <li class="rem_playlist_list-item">"playlist item ..."</li>
    </ul>

</div>

Answer 1

您可以通过删除 iframe 的内联样式来解决此问题。这将允许您检索高度和宽度并使用您创建的函数动态设置它们。

试试这个 JSFiddle

JQuery

// A function to rezise the height of <iframe> based on its width
function sizeIt() {
  var player = $('.rem_video_wrapper > iframe'),
  w = player.width(),
  h = w * 0.6;

  player.height(h);
}

//Remove inline styling and call sizeIt() for inital sizing
$(function (){
    $('.rem_video_wrapper > iframe').removeAttr('style');
    sizeIt();
});

//call sizeIt() on page resize
$(window).on('resize', function() {
  sizeIt();
});