如何在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说你只能设定url了的background-image财产,所以你应该使用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);
}