0

我从这里改编了一些代码，以检测我的 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*/
4

2 回答 2

0

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

于 2013-01-29T12:46:13.127 回答
0

您需要在orientationchange事件处理程序中请求计算的样式以获取新的伪元素样式。

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

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

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

于 2013-01-30T11:41:34.427 回答