-1

私の Web サイトでは、ユーザーが次のコードを含む 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 に答える