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

Question

我有带有文本字段的输入标签，但想知道如何获取用户输入的输入文本并将其显示在 CSS 中

这可能看起来很奇怪，但对于颜色背景选项 (#ffffff)，设计师将有权输入他们自己的颜色，一旦他们点击保存，它就会被添加到正文背景样式中。

我设法让 css 通过 liquid 获取上传的图像，但我不知道如何保留颜色代码的输入文本。 我通过 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