在 jquery-mobile 中获取计算（不是 CSS）宽度（）答案

【问题标题】：Getting computed (not CSS) width() in jquery-mobile在 jquery-mobile 中获取计算（不是 CSS）宽度（）
【发布时间】：2014-04-27 21:18:58
【问题描述】：

我有一个 div id="XYZ"，CSS 指定宽度：37%；

然后我希望使用此 div 的 px 宽度来设置其他宽度，但我只能访问给定的 css% 值，而不能访问 DOM 中 div 的计算 px 宽度。我做错了什么？

$( document ).on( "pagecreate", "#page", function( event ) {

        var divWidth = $("#XYZ").width();
        console.log('div XYZ width is ' + divWidth); 

});

它输出 37。哪个是 css % 值，但 jquery width() 应该给我以 px 为单位的计算宽度，不应该吗？

我在想，问题可能是我在“pagecreate”询问（同样的结果导致不推荐使用“pageinit”）。

我怎样才能得到 div 的计算宽度？

【问题讨论】：

我认为这个链接可以帮助你看到stackoverflow.com/questions/17305707/…
@vivek，你什么都没告诉我。为什么你认为我需要再次阅读 API？我没看到什么？
使用pagecontainershow（如果您使用jQM 1.4）事件来获取计算宽度。在pagecreate 事件中，元素是不可见的，并且页面还没有完全成形。
页面已创建但仍处于隐藏状态，在此阶段不可见。当pagecontainershow 触发时它是可见的。 jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events
@Omar，很棒的链接！非常漂亮的图形和文本分解！

标签： jquery jquery-mobile

【解决方案1】：

使用pagecreate 检索实际的.width()、.height()、.offest() 等，不会返回计算值，因为页面和元素里面都是隐藏的。

要检索此类数据，您需要在上一页和下一页之间的转换完成时使用pagecontainertransition，或者在上一页完全隐藏时使用pagecontainerhide，或者在下一页完全可见时使用pagecontainershow。

但是，请注意，这些事件不能附加到特定页面。从 jQM 1.4 开始，“页面事件”被替换为“PageContainer Events”。因此， - 不幸的是 - 你应该使用if 声明或switch/case。

$( document ).on( "pagecontainershow" , function( event, ui ) {
  var divWidth = $( "#XYZ" ).width();
  console.log('div XYZ width is ' + divWidth);
});

【讨论】：

【解决方案2】：

您可以使用getComputedStyle

Window.getComputedStyle() 方法在应用活动样式表并解析这些值可能包含的任何基本计算后，给出元素所有 CSS 属性的值。

使用

var divWidth = document.defaultView.getComputedStyle($("#XYZ")[0], null).width;

或者

var divWidth = window.getComputedStyle($("#XYZ")[0], null).width;

【讨论】：

谢谢，但是我仍然得到了 37% 的价值。问题很可能出在页面事件的 JQM 顺序上。