"Cannot Read Property 'content' Of Null": Psuedo Elements

I adapted some code from here in order to detect orientation changes in my Phonegap app (to load different CSS files for landscape and portrait). I'm getting a 'cannot read propert

Solution 1:

it seems that bodyAfterStyle is lost, i would propose to move its assignment into the event function.

Solution 2:

You need to request the computed style in the orientationchange event handler to get the new pseudo-element's styles.

Quoting the Document Object Model CSS W3C Spec on getComputedStyle:

Since a computed style is related to an Element node, if this element is removed from the document, the associated CSSStyleDeclaration and CSSValue related to this declaration are no longer valid.

The explanation for your case is that the pseudo-element instance changes when the media query kicks in. The pseudo-element is actually removed and replaced with a new one. In your code the bodyAfterStyle reference points to the old instance which is no longer available.