Javascript &引用；无法读取属性'；内容'；“空”的定义：伪元素

为了检测Phonegap应用程序中的方向变化，我修改了来自的一些代码（加载横向和纵向的不同CSS文件）。我得到了一个null错误的“无法读取属性'content'，这意味着DOM调用有问题。代码包括将这些psuedo元素添加到主CSS文件中：

/*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*/

此事件侦听器用于检查方向更改上的伪元素：

/*ORIENTATION CHANGES*/
    //get style of the body:after element
var bodyAfterStyle = window.getComputedStyle(document.body, ":after");

window.onorientationchange = function() {


  navigator.notification.alert(
        'ORIENTATION CHANGELOL',  // message
        'Credits',            // title
        'Credits');              // buttonName

  if(bodyAfterStyle.content == 'p') {

/*whatever
    navigator.notification.alert("Now in Portrait");
    var sheet = document.createElement('link');
    sheet.innerHTML = 'href=\"portrait.css\" rel=\"stylesheet\"  type=\"text/css\"';
    document.body.appendChild(sheet);
end whatever*/
} 
    else if(bodyAfterStyle.content == 'l') {
    //do landscape stuff
  }
}
    /*END OF ORIENTATION STUFF*/

---

bodyAfterStyle似乎丢失了，我建议将其赋值移到事件函数中。

您需要在

方向更改

事件处理程序中请求计算样式，以获取新伪元素的样式

引用

getComputedStyle

上的W3C规范：

由于计算样式与元素节点相关，因此如果从文档中删除此元素，则与此声明相关联的CSSStyleDeclaration和CSSValue将不再有效

---

对您的情况的解释是，当媒体查询开始时，伪元素实例会发生更改。伪元素实际上会被删除并替换为新的。在您的代码中，

bodyAfterStyle

引用指向不再可用的旧实例。

这似乎已经完成了此操作……尽管在如果语句正在执行，即使我注释掉了除警报以外的所有内容！但是getComputedStyle是在方向更改之后出现的？我真的不明白为什么它没有引用新的语句。getComputedStyle是否执行新的媒体查询？我只是在iPad上尝试了你的代码，它确实按照你的预期工作，没有错误。但是，没有错误使用window.matchMedia（）API获取设备方向的一种更简单的方法。下面是一个示例：如果您需要支持旧设备，matchMedia甚至还有一个polyfill：