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

Question

I have a div id="XYZ" with CSS specified width: 37%;

I then wish to use the px width of this div to set other widths, but I can only access the given css% value and not the computed px width of the div in the DOM. What am I doing wrong?

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

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

});

It outputs 37. Which is the css % value, but jquery width() SHOULD give me the computed width in px, shouldn-t it?

I was thinking that maybe the problem is that Im asking at 'pagecreate' (same result in deprecated 'pageinit').

How can I get the computed width of the div?

Answer 1

Using pagecreate to retrieve actual .width() , .height() , .offest() , etc., won't return the computed value since page and elements within it are are all hidden.

To retrieve such data, you need to use pagecontainertransition when transition between previous page and next page is complete, or pagecontainerhide when previous page is completely hidden, or pagecontainershow when next page is completely visible.

However, note that those events can't be attached to a specific page. As of jQM 1.4, "page events" are replaced with " PageContainer Events ". Thus, - unfortunately - you ought to use if statement or switch/case .

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

Answer 2

You can use getComputedStyle

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

Use

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

Or

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