Skip to content

“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 property ‘content’ of null error, implying there’s something wrong with the DOM call. The code involves adding these psuedo elements to the primary CSS file:

/*Orientation Detection Hack*/
body:after {
    content: "";
    position: absolute;
    color: transparent;
@media all and (orientation: portrait) {
    body:after {
        content: "p";
@media all and (orientation: landscape) {
    body:after {
        content: "l";
/*end of orientation detection*/

And this event listener to check the pseudo element on an orientation change:

    //get style of the body:after element
var bodyAfterStyle = window.getComputedStyle(document.body, ":after");
window.onorientationchange = function() {
        'ORIENTATION CHANGELOL',  // message
        'Credits',            // title
        'Credits');              // buttonName
  if(bodyAfterStyle.content == 'p') {
    navigator.notification.alert("Now in Portrait");
    var sheet = document.createElement('link');
    sheet.innerHTML = 'href="portrait.css" rel="stylesheet"  type="text/css"';
end whatever*/
    else if(bodyAfterStyle.content == 'l') {
    //do landscape stuff


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