在jquery-mobile中计算（不是CSS）width（）

Question

我有一个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的计算宽度？

Answer 1

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

要获取这样的数据，你需要使用pagecontainertransition当上页和下一页之间的过渡完成后，或pagecontainerhide当上一个页面是完全隐藏，或pagecontainershow当下一页是完全可见。

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

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

Answer 2

您可以使用getComputedStyle

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

采用

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

要么

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