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 Events”。因此， - 很遗憾 - 您应该使用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;

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

2 个答案: