如何使用 CSS 检索用户输入的文本

Question

我的输入标签带有文本字段，但想知道如何获取用户输入的输入文本并将其显示在 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>

如果有更简单的方法可以做到这一点，我非常感谢一些帮助，我们将不胜感激！

Answer 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

Answer 2

添加到 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;
};