如何使表单的值实时更改页面的 CSS（无需刷新页面）？答案

【问题标题】：How do I make a form's values change a page's CSS in real-time (without having to refresh the page)?如何使表单的值实时更改页面的 CSS（无需刷新页面）？
【发布时间】：2018-09-07 12:34:51
【问题描述】：

当用户使用 javascript 将值键入表单时，我正在尝试更改页面上的 CSS。例如 - 如果他们在所述字段中输入颜色值，它会将所述按钮变为该颜色。或者如果他们在尺寸字段中提供输入，则更改尺寸。我无法找到任何与此相关的示例。如果您能向我指出有关此的任何资源，那就太棒了！

**这是我的第一篇文章，如果我做错了什么，请告诉我。

【问题讨论】：

您需要发布您尝试过的代码。为人们寻找资源被认为是 SO 题外话。
感谢您告诉我！

标签： javascript html css forms button

【解决方案1】：

此输入接收颜色代码。 ff0 - 例如

var btn = document.getElementById('btn');
function changeColor(input) {
  btn.style.background="#"+input.value;
}

<form>
    <input id="inp" type="text" onInput="changeColor(this);">
    <button id="btn">Click</button>
</form>

【讨论】：

【解决方案2】：

这很有趣，这是我几周前决定做的事情，您只需在 html 页面的 head 部分创建一个空白样式，添加一个 id 并使用 jquery 来设置样式的内容您决定使用来设置值，例如

<pre contenteditable></pre>
<script>
$(document).ready(function(){
    $('pre').keyup(function(){
        $('#yourstyletagid').html($(this).html());
    });
});
</script>

【讨论】：

【解决方案3】：

这样的？

var button = document.getElementById("button");
var b = button.offsetWidth;
function a(input) {
button.style.width = b + input.value + "px";
}

<form>
<input type="number" onchange="a(this);" min="5">
<button id="button">Hello World</button>
</form>

【讨论】：