Question

我想找到一个javascript代码，允许用户在文本框或提示框中键入HTML颜色代码，并使页面的背景颜色更改为输入的颜色代码。截至目前，这不起作用：
标头{ 颜色：绿色; font-size：250％; 背景：蓝色; } 身体 { 背景：绿色; }

        <header>
    <center>
    Test
    </center>
</header>
    <center>
        <br>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <input type="text" class="inp" placeholder="6 digit hex value">
 <input type="submit" class="sub" value="Set Background Color">
 <script type="text/javascript">
$(document).ready(function() {
$('.sub').click(function() {
$('.body').css('background-color',"#"+$('.inp').val());
});
});
</script>
    </center>
 </div>
 </html>

有谁知道怎么做？
谢谢你-A

Answer 1

将评论作为JSFiddle的答案发布

你需要的是这个

<input type="text" onblur="document.body.style.backgroundColor = this.value;" id="color">

你可以进一步将其分成功能。这是工作JSFIDDLE

这适用于文本输入（红色，蓝色，橙色）以及十六进制代码（＃000000）。

对于你的代码，这里是正确的代码。身体不是一个类，它是一个标签。所以不需要选择器。

<script type="text/javascript">

$(document).ready(function() {

$('.sub').click(function() {
    $('body').css('background-color',"#"+$('.inp').val());
    });
    });
</script>

Answer 2

试试这个：

$(document).ready(function() {
  $('.sub').click(function() {
    $('.body').css('background-color',"#"+$('.inp').val());
  });
});

<div class="body">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp" placeholder="6 digit hex value">
<input type="submit" class="sub" value="Set Background Color">
</div>

用户使用HTML颜色代码选择背景颜色

2 个答案: