jQuery.width() 返回百分比宽度而不是像素宽度答案

【问题标题】：jQuery.width() is returning percentage width instead of pixel widthjQuery.width() 返回百分比宽度而不是像素宽度
【发布时间】：2015-07-21 23:10:28
【问题描述】：

请看以下 2 个 jsFiddle 示例：

示例编号 1

第一个是纯 html 和对 Jquery 宽度函数的一次调用，然后按预期返回宽度（以像素为单位）。
Demo with pure HTML

HTML：

<body class="ui-mobile-viewport ui-overlay-a" data-pinterest-extension-installed="cr1.38.2" style="background-color: rgb(255, 182, 50);">
    <div data-role="page" data-theme="b" id="mailiPage" style="">
        <div id="mainDiv" data-role="content" class="ui-content" data-theme="b" style="text-align:center;background-color:#ffb632;background-image:none;height:100%">
            <div class="ui-grid-b">
                <div id="left" class="ui-block-a" style="width:5%;"></div>
                <div id="center" class="ui-block-b" style="width:90%;"></div>
                <div id="right" class="ui-block-c" style="width:5%;"></div>        
            </div>
        </div>
    </div>    
</body>

JAVASCRIPT：

alert('this width of the center div is in pixels: ' + $('#center').width() + '\n');

示例 2

第二个示例包括用于动态编写 html 的 javascript 以及对 width 函数的调用，在这种情况下返回百分比值而不是像素宽度。
Demo with only Javascript

JAVASCRIPT：

var strPage = ""
var leftSideColumnsWidth = 5;
var rightSideColumnsWidth = 5;
var centerColumnsWidth = 90;
$("body").empty();
strPage = strPage + "<div data-role='page' data-theme='b' id='mailiPage' style=''>"
strPage = strPage +     "<div id='mainDiv' data-role='content' class='ui-content' data-theme='b' style='text-align:center;background-color:#ffb632;background-image:none;height:100%'>" //padding-top: 56px;'>"
strPage = strPage +         "<div class='ui-grid-b'>" 
strPage = strPage +             "<div id='left' class='ui-block-a' style='width:" + leftSideColumnsWidth + "%;'>"
strPage = strPage +             "</div>"
strPage = strPage +             "<div id='center' class='ui-block-b' style='width:" + centerColumnsWidth + "%;'>"
strPage = strPage +             "</div>"
strPage = strPage +             "<div id='right' class='ui-block-c' style='width:" + rightSideColumnsWidth + "%;'>"
strPage = strPage +             "</div>"
strPage = strPage +         "</div>"
strPage = strPage +     "</div>"
strPage = strPage + "</div>" 

$("body").append(strPage);

alert('this width of the center div is not in pixels but in percentage: ' +$('#center').width()+'\n');

知道为什么会延迟吗？

更新：

在动态版本中，如果你标记出定义JQM页面的第一个div并包含“data-role='page'”，那么width函数将返回以像素为单位的值！现在的问题仍然是为什么？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

jQuery Mobile 页面，即带有[data-role=page] 的 div 元素最初是隐藏的。对于隐藏元素：

.width() 报告的值不保证准确当元素或其父元素被隐藏时。要获得准确的值，在使用.width() 之前确保元素可见。 jQuery 将尝试暂时显示然后重新隐藏一个元素，以便测量它的尺寸，但这是不可靠的，并且（即使准确）会显着影响页面性能。这个在未来的版本中可能会删除显示并重新隐藏测量功能 jQuery.

话虽如此，您可能想要look at this example，它会挂钩 pageshow 事件以确定页面（以及元素）是否可见。

【讨论】：

是的，解释是.width()调用是在对应元素渲染之前运行的，但是jquery mobile跟什么有什么关系呢？
@blgt JavaScript 创建的“页面”由于 jQuery mobile CSS 而被隐藏。