使用JS / jQuery更改线性渐变

时间:2018-06-14 12:03:52

标签: javascript jquery html css

所以我正在开发一个涉及输入类型颜色的项目。我需要使用这些来制作渐变,我该怎么做?

这是颜色标签

<div id="part1" align=center>
<input type="color" id = color>
<input type="color" id = color2>

编辑: 香港专业教育学院只尝试过尝试

$("body").css("background-color",clr);

但据我所知,那不能做渐变

2 个答案:

答案 0 :(得分:0)

由于您提供的代码未完成:

  1. 变量clr是什么意思?
  2. 输入值何时会在后台生效?
  3. 在这里,我将提供一个示例代码,我尝试猜测你想要做什么

      

    我的意思是我想改变背景:线性渐变(红色,蓝色),这样我就可以使用输入类型=&#34;颜色&#34;更改渐变的颜色

    以下是使用按钮为渐变颜色指定背景的示例代码。 希望这可以帮到你。

    &#13;
    &#13;
    $("#btn_color").on('click', function(){
    	var color = $("#color").val();
      var color2 = $("#color2").val();
      var str = "linear-gradient(" + color + "," + color2 + ")";
      $("body").css("background",str);
    })
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body>
    <div id="part1" align=center>
      <input type="color" id ='color'>
      <input type="color" id ='color2'>
    </div>
    <button id="btn_color">Click me </button>
    </body>
    
    </html>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:0)

您需要在background属性

中放置所需渐变的值

查看此网址以获取更多信息https://www.w3schools.com/css/css3_gradients.asp

这里我举了一个实例:

function changeBackground(){
  const color1 = document.getElementById("color").value;
  const color2 = document.getElementById("color2").value;
  document.body.style.background = `linear-gradient(${color1}, ${color2})`;
}
html, body{
  height: 100%;
}
<div id="part1" align="center">
  <input type="color" id ="color">
  <input type="color" id ="color2">
  <button onClick="changeBackground()">Change background!</button>
</div>