0

テキストフィールドに入力タグがありますが、ユーザーが入力した入力テキストを取得して CSS に表示する方法を知りたいと思っていました

これは非常に奇妙に見えるかもしれませんが、デザイナーが独自の色を入力できるのは、色の背景オプション (#ffffff) のためであり、保存を押すと、ボディの背景スタイルに追加されます。

css にアップロードされた画像を液体で取得させることができましたが、カラーコードの入力テキストを保持する方法がわかりません。Shopifyを通じて.Liquidを使用しています

私のCSS：

 body {  
  background:{% if settings.use_Site_background %}url('Site_background.jpg'){% endif %} no-repeat /////This is where I need the color code/////// fixed top right; 
}

私の設定：

 <tr>
  <td><label for="Background_color">Background color</label></td>
  <td><strong>#</strong><input name="Background_color" value="" id="Background_color" type="text" maxlength="6" /></td> 
</tr>

これを行うためのより簡単な方法があれば、私は本当に助けていただければ幸いです。

4

2 に答える 2

1

次のように、テキスト フィールドの値を取得します。

var inputColor = document.getElementById('Background_color').value

そして、スクリプト内の必要な場所で使用します

完全なスクリプト:

var btn = document.getElementById('pickColor');
btn.addEventListener('click', pickColorFunc, false);
function pickColorFunc(){
    var inputColor = document.getElementById('Background_color').value,
        myContainer = document.getElementById('content-box');
    myContainer.style.backgroundColor = inputColor;
}

HTML:

<input type="text" id="Background_color" />
<button id="pickColor">Pick Color</button>
<div id="content-box">
</div>

そして、背景色が見えるようにするためにデフォルトで追加した小さなcss：

#content-box{
    width:100px;
    height:100px;
}

このコードを確認してください: http://jsfiddle.net/h5W6j/1

于 2013-08-13T03:26:11.943 に答える
0

Aditya Saxena の回答に追加するには: jsFiddle

これをフッターに配置します。

document.getElementById('someForm').onsubmit = function() {
    var inputColor = document.getElementById('Background_color').value,
        $body = document.getElementsByTagName('body')[0];

    $body.style.backgroundColor = inputColor;
    return false;
};
于 2013-08-13T03:59:39.647 に答える