请看以下2个jsFiddle示例:
示例编号1
第一个是纯html,并且是对Jquery width函数的单个调用,然后按预期返回以像素为单位的宽度。
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页面并包含“ data-role ='page'”的第一个div,那么width函数将返回以像素为单位的值!
现在的问题仍然是为什么?
最佳答案
jQuery Mobile页面即带有[data-role=page]
的div元素最初被隐藏。对于隐藏元素:
.width()
报告的值不保证是准确的
隐藏元素或其父元素时。为了获得准确的价值,
使用.width()
之前,请确保该元素可见。 jQuery将
尝试暂时显示然后重新隐藏元素,以便
测量其尺寸,但这是不可靠的,并且(即使
准确)会严重影响页面性能。这个
显示和隐藏测量功能可能会在将来的版本中删除
的jQuery。
话虽如此,您可能想要look at this example,它会钩住pageshow事件来确定页面(以及元素)是否可见。
关于javascript - jQuery.width()返回百分比宽度而不是像素宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31537222/