“无法读取 null 的属性'内容'”:伪元素

"Cannot read property 'content' of null": Psuedo Elements

本文关键字：内容 元素 属性 读取 无法读取 null      更新时间：2023-09-26

我从这里改编了一些代码，以检测我的Phonegap应用程序中的方向变化（为横向和纵向加载不同的CSS文件）。我收到一个"无法读取空错误的属性'内容'，这意味着 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*/
似乎

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

您需要

在 orientationchange 事件处理程序中请求计算样式才能获取新伪元素的样式。

引用文档对象模型 CSS W3C 规范getComputedStyle：

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

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

相关文章：