Question

我调整了here中的一些代码，以便检测我的Phonegap应用中的方向更改（为横向和纵向加载不同的CSS文件）。我得到一个“无法读取属性'内容'的null错误，暗示DOM调用有问题。代码涉及将这些伪元素添加到主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*/

Answer 1

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

Answer 2

您需要在orientationchange事件处理程序中请求计算样式才能获得 new pseudo-element 的样式。

在getComputedStyle上引用Document Object Model CSS W3C规范：

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

您的情况的解释是，当媒体查询启动时，伪元素实例会发生更改。实际上会删除伪元素并替换为新元素。在您的代码中，bodyAfterStyle引用指向不再可用的旧实例。

“无法读取null的属性'内容'：Pseudo Elements

2 个答案: