6

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

 $(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>
4

6 回答 6

13

试试看var color = $("#colorChoice").val();jQuery文档

您不妨将回调绑定到 onChange 事件而不是 onClick 事件：

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

工作样本

于 2012-10-31T08:33:38.850 回答
7

你的语法不正确。

JavaScript：

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

jQuery：

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

我推荐使用 vanilla JS，因为它比 jQuery 更快。

于 2015-10-10T06:58:59.747 回答
6

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

document.getElementById("colorChoice").value;
于 2015-02-14T04:13:46.153 回答
0

试试这个：

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

color = e.target.value;

})
于 2020-07-16T12:38:10.617 回答
0

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

第一：保持 value 属性为任何颜色的十六进制值。

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

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

$('#colorChoice').on('change', function() {
    var newbgcolor = this.value;
    $('#playground').css('background', newbgcolor);
});
于 2020-12-03T22:41:25.723 回答
0

使用 vanilla 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 作为颜色纠察队员输入。

于 2021-06-11T15:08:56.260 回答