-1

我的网站允许用户使用带有以下代码的 URL 更改背景图像：

var defaultImage = "'#fff'";
document.getElementsByTagName('body')[0].style.backgroundImage = localStorage.getItem('back') ? "url('" + localStorage.getItem('back') + "')" : "url('" + defaultImage + "')";

function changebackground() {
    var url = document.getElementById('bgchanger').value;
    document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";
    localStorage.setItem('back', url);
}

我想知道如何在文本框中显示当前背景图像 URL？

演示：http: //goo.gl/253IN

更新： 这就是我想要的：

function changebackground() {
    var url = document.getElementById('bgchanger').value;
    document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";

    // populate the input w/ the url:
    document.getElementById('textfield').value = url;    

    localStorage.setItem('back', url);
}

但是，每次页面刷新时，文本框都很清晰。如何保存此信息，以便即使刷新页面也始终保留在文本框中？

先感谢您！

4

2 回答 2

1

怎么样：

function changebackground() {
    var url = document.getElementById('bgchanger').value;

    // populate the input w/ the url:
    setBackground(url);

    localStorage.setItem('back', url);
}

function setBackground(url){
    document.body.style.backgroundImage = "url('" + url + "')";
    setText(url);
}

function setText(url){
    document.getElementById('textfield').value = url;
}

var defaultImage = "'#fff'";
    bgUrl = localStorage.getItem('back') ? localStorage.getItem('back') : defaultImage;

// Set background
setBackground(bgUrl);

我唯一添加的是注释行和紧随其后的行。您已经有了 URL，只需设置输入元素的值即可。

更新

我添加了一些代码来在第一次设置背景时初始化文本框（大概是在页面加载时），根据您在下面评论中的附加要求。

于 2013-03-07T19:04:05.323 回答
1

您可以像这样获取背景图像：

window.onload = function () {
    var bgimage = document.body.style.backgroundImage;
    var cleaned = bgimage.replace(/^url\('/, "").replace(/'\)$/, "");
    var txtbox = document.getElementById("txt1");
    txtbox.value = cleaned || "No background image set";
};

http://jsfiddle.net/KW852/3/

它获取正文的backgroundImage样式，然后去除任何前导url('和尾随')并返回中间文本。然后，只需设置文本框的值。

于 2013-03-07T19:51:37.387 回答