javascript - 使用 jQuery 设置后的 margin-left undefined

Question

我正在尝试动态设置包装器的边距。这是我的 JavaScript 代码:

var w = window.innerWidth;
if (w > 800) {
    var margin = (w - 800) / 2;
    $('.ui-page').css('margin-left', margin);
    var output = $('.ui-page').css('margin-left');
    $('.ui-footer').css('margin-left', margin);
    $('.ui-header').css('margin-left', margin);
    alert(output);
}

但是当我打开页面时，警告显示 undefined !?

Answer 1

除了我之前的回答(表明它有效)之外，还有这种故障安全......这是一种必须始终有效的不同方法。我怀疑运行代码时您的页面未加载:

http://jsfiddle.net/digitalextremist/xfVdL/1/

$( document ).ready( function() {
    var w = window.innerWidth;
    var maxWidth = 300    
    if ( w > maxWidth ) {
        var margin = (w - maxWidth) / 2;
        $('.ui-page').css('margin-left', margin);
        var output = $('.ui-page').css('margin-left');
        $('.ui-footer').css('margin-left', margin);
        $('.ui-header').css('margin-left', margin);
        alert( output );
    }
});

或者，如果您使用 jQuery Mobile:

$( document ).on( 'pagebeforeshow', function( event ) {
    var w = window.innerWidth;
    var maxWidth = 300    
    if ( w > maxWidth ) {
        var margin = (w - maxWidth) / 2;
        $('.ui-page').css('margin-left', margin);
        var output = $('.ui-page').css('margin-left');
        $('.ui-footer').css('margin-left', margin);
        $('.ui-header').css('margin-left', margin);
        alert( output );
    }
});

关键在测试尺寸之前让页面先加载是很重要的。

您所做的是正确的，但 jQuery 和 jQuery Mobile 会分阶段呈现页面。为确保在正确的时间对 .ui-page 进行测量，一旦 jQuery 或 jQuery Mobile 正确加载了所有内容，您需要确保首先呈现所有内容，这意味着您需要使用 $( document ).on( 'pagebeforeshow' ) 用于 jQuery Mobile，或使用 $( document ).ready() 用于 jQuery 本身。这些确保您的代码在页面完全呈现后运行。在此之前，您的测量结果将是错误的!在此之前，.ui-page 可能还不存在，如果它是由 jQuery Mobile 添加的话。

这里有更多信息供您引用:

• When should I use jQuery's document.ready function?
• jQuery: Why use document.ready if external JS at bottom of page?
• http://learn.jquery.com/about-jquery/how-jquery-works/
• http://www.w3schools.com/jquerymobile/event_pagebeforeshow.asp
• http://jquerymobile.com/demos/1.1.0/docs/api/events.html