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 回答