页面加载后检索并更新 CSS 值

Question

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

我要完成的任务： 更新元素相对于其流动宽度的高度。

我尝试做的 是获取元素的宽度，将其乘以我想要的比率以得出元素的正确高度。我将其传递给 (window).load 和 (window).resize，以便在页面加载后计算高度，并且随着 window 和元素宽度的变化（元素具有 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 plugin) and 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();
});

页面加载后检索并更新 CSS 值

Retrieve and update CSS value after pageload

css

jquery

pageload