Javascript 渐变背景形式 Table

Question

我对此有点陌生，真的不知道从哪里开始。我想要做的是创建一个网页，您可以在其中使用表单提交两种颜色。然后我想要一个 table ，当你点击一个按钮时，单元格的背景颜色将变成所选两种颜色的渐变。如果您能提供任何帮助，我们将不胜感激。

<script>
function updateColor(){
    var col1 = document.getElementById('color1').value;
    var col2 = document.getElementById('color2').value;
    var myCell = document.getElementById('mycell');     
        myCell.style.background = "linear-gradient(to right," + col1 + "," col2 + ");";            
}
</script>

<select id="color1">
<option value="0">set background color    
<option value="red">red
<option value="yellow">yellow
<option value="blue">blue
<option value="green">green
<option value="black">black
</select><br />

<select id="color2">
<option value="0">set background color    
<option value="red">red
<option value="yellow">yellow
<option value="blue">blue
<option value="green">green
<option value="black">black
</select>

<button onclick="updatecolor();">Gradient</button>

<table border="1">
<tr>
    <td>One
    </td>
    <td>Two
    </td>
    <td id="mycell">Three
    </td>
    <td>Four
    </td>
</tr>
</table>

我不太擅长这个，我知道它可以用一种颜色作为背景来完成，但我想要一个双色渐变。

Answer 1

您刚才有一些小错别字，这应该可以解决：

function updateColor(){
    var col1 = document.getElementById('color1').value;
    var col2 = document.getElementById('color2').value;
    var myCell = document.getElementById('mycell');
    mycell.style.background = "linear-gradient(to right, " + col1 + ", " + col2 + ")";
}

<select id="color1">
<option value="0">set background color
<option value="red">red
<option value="yellow">yellow
<option value="blue">blue
<option value="green">green
<option value="black">black
</select><br />

<select id="color2">
<option value="0">set background color
<option value="red">red
<option value="yellow">yellow
<option value="blue">blue
<option value="green">green
<option value="black">black
</select>

<button onclick="updateColor();">Gradient</button>

<table border="1">
<tr>
    <td>One
    </td>
    <td>Two
    </td>
    <td id="mycell">Three
    </td>
    <td>Four
    </td>
</tr>
</table>

Javascript 渐变背景形式 Table

Javascript Gradient Background Form to Table

javascript

forms

linear-gradients