Question

我正在尝试使用颜色输入类型根据选择更改h1元素的颜色，但我似乎无法使其工作。我已经尝试将颜色变量输出到警报，它只返回undefined。

 $(function(){

        $("#changeColor").click(function(){

          var color =  $("#colorChoice").value

          $("h1").css("color" + '"' + color + "'")


        });



    });


    </script>


</head>
  <html>
  <body>

  <h1>This is the default text</h1>
  <form>
  <fieldset>
      <select id="changeFont">
        <option>Arial</option>
        <option>Georgia</option>
        <option>Helevtica</option>
    </select>
    <input type="color" id="colorChoice">
    <button id="changeColor" class="btn-primary pull-right">Change</button>
</fieldset>
</form>

Answer 1

尝试var color = $("#colorChoice").val();请参阅jQuery docs

您也可以在onChange事件而不是onClick事件上绑定回调：

$("#colorChoice").change(function(){
  $("h1").css('background', $(this).val());
});

Working sample

Answer 2

不要使用Jquery。 vanillaJS工作得很好

document.getElementById("colorChoice").value;

Answer 3

您的语法不正确。

JavaScript的：

var color = document.getElementById("colorChoice").value;

jQuery的：

var color =  $("#colorChoice").val();

我建议使用vanilla JS，因为它比jQuery更快。

Answer 4

尝试一下：

document.getElementById("colorChoice").addEventListener('change', (e) => {

color = e.target.value;

})

Answer 5

如果您未指定颜色输入类型标记的value属性，它将不会使用javascript来获取颜色

首先：将value属性保留为任何彩色十六进制值。

<input type="color" value="#858585" id="colorChoice">

第二：使用jQuery属性值。例如，

$('#colorChoice').on('change', function() {
    var newbgcolor = this.value;
    $('#playground').css('background', newbgcolor);
});

Answer 6

使用原生 JavaScript 试试这个。

function changeColor(){
    document.getElementById("colorChoice").addEventListener('change', (e) => {
        let color = e.target.value;
        document.getElementById('bgColor').style.backgroundColor = color; 
    });
};

changeColor();

不要忘记将这些 ID 添加到您的 HTML 中。就我而言，我使用 #bgColor 作为 div，#colorChoice 作为颜色选择输入。

如何从HTML5颜色选择器获取值

6 个答案: