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，或jQuery本身的$( document ).ready()。这些确保您的代码在页面完全呈现后运行。在此之前，您的测量将是错误的！在此之前，.ui-page可能尚未存在，如果它是由jQuery Mobile添加的。

以下是您的更多信息：

Answer 2

尝试用单位设置保证金;类似的东西：

$('.ui-page').css('margin-left', margin + 'px');

此外，您可以使用margin: 0 auto;将div的中心放在页面中。有关详细信息，请参阅MDN。

Answer 3

您.ui-page的查询似乎没有返回元素因此，在尝试检索margin-left属性时，它会返回undefined。

尝试检查页面上是否确实存在.ui-page 快速执行此操作的方法：

if ( $('.ui-page').length > 0 ) alert('.ui-page exists!');

Answer 4

您使用的是哪个版本的jQuery？什么浏览器？

根本不更改代码，它在版本1.10.1

下工作正常

（它也适用于所有其他版本......在Chrome和Firefox上）

明白我的意思？ http://jsfiddle.net/digitalextremist/xfVdL/

所以，它确实有用......不需要“px”。

使用jQuery设置后，margin-left未定义

4 个答案: