jquery - 如何更改 PhoneGap 应用程序中的背景图像？

Question

每当方向发生变化时，我都会尝试更改正文背景图像。起初这似乎很容易，所以我尝试了这段代码:

    function onBodyLoad() {     
        document.addEventListener("deviceready", onDeviceReady, false);
        document.addEventListener("orientationchange", onOrientationChange, true);
    }

    function onOrientationChange(e) {
        var orientation = (window.orientation == -90 || window.orientation == 90) ? "landscape" : "portrait";
        console.log("orientation: " + orientation);
        $("body").css("background-image", "url(images/" + orientation + ".png) no-repeat fixed center top");
    }

    function onDeviceReady() {
        console.log("at onDeviceReady");
        onOrientationChange();
    }

每次更改方向时，我都会在控制台中显示正确的方向 - 这意味着我的事件会正确触发。但是背景没有改变，甚至没有初始设置(即使我在 onDeviceReady 中手动调用处理程序 - 我看到它被调用的控制台输出)。 $("body") 行中的某些内容不起作用。我尝试了几种 CSS 属性组合，甚至 .css({"backgroundImage": "..."})，但都无济于事。

作为记录，images 文件夹中有一个 landscape.png 和 portrait.png，与 html 页面位于同一目录中。

我错过了什么？

感谢您的宝贵时间。

Answer 1

也许没有 jQuery？

function onOrientationChange(e) {
    var orientation = (window.orientation == -90 || window.orientation == 90) ? "landscape" : "portrait";
    console.log("orientation: " + orientation);
    document.body.style.backgroundImage="url('images/" + orientation + ".png')";
    document.body.style.backgroundRepeat="no-repeat";
    document.body.style.backgroundAttachment="fixed";
    document.body.style.backgroundPosition="top center";
}

正如@scessor 所说，您只能设置 background-image 属性的 url，因此您应该使用 background 或其他 backgroundXXX 属性代替。

使用类

function onOrientationChange(e){
    var orientation = (window.orientation == -90 || window.orientation == 90) ? "landscape" : "portrait";
    console.log("orientation: " + orientation);
    $("body").removeClass("portrait").removeClass("landscape").addClass(orientation);
}