CSS与JavaScript线性渐变：如何用JS实现表格单元格对角背景

Hey there! I see you're trying to dynamically set that diagonal split background for table cells using JavaScript, and the Chrome-specific code you found isn't matching your CSS效果. Let's get this sorted out.

The Issue #

Your CSS uses the standard linear-gradient syntax with to bottom right to define the gradient direction, but your JavaScript code is using the old -webkit- prefix without the to keyword for the direction. Modern browsers (including Chrome) no longer need the -webkit- prefix for linear gradients, and omitting to changes how the gradient is rendered—this is why it's not matching your CSS result.

The Solution #

Update your drawHalfCell function to use the standard gradient syntax, identical to what you have in your CSS. Here's the revised function:

function drawHalfCell(id, col1, col2) {
  const cell = document.getElementById(id);
  // Make sure we don't throw errors if the element doesn't exist
  if (cell) {
    cell.style.background = `linear-gradient(to bottom right, ${col1} 50%, ${col2} 50%)`;
  }
}

// Call it just like before
drawHalfCell("td5", "red", "blue");

What Changed? #

• Removed the -webkit- prefix: Modern Chrome supports the standard linear-gradient property without vendor prefixes.
• Added to before bottom right: This matches your CSS direction syntax, ensuring the gradient runs from the top-left to bottom-right corner (creating the perfect diagonal split at 50%).
• Added a check for the element existence: Prevents potential errors if the target ID doesn't exist in the DOM.

Full Revised Code #

Here's your complete test code with the updated JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
element { --main-px-size: 18px; }
td { background: linear-gradient( to bottom right, rgb(255, 255, 255) 50%, rgb(0, 255, 0) 50%); }
#id1 { background-color: rgb(200, 100, 200); color: #FFFFFF; text-align: center; font-size: var(--main-px-size); font-family: "Lucida Console", Monaco, monospace; }
.class1 { background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); text-align: center; font-size: var(--main-px-size); font-family: "Lucida Console", Monaco, monospace; }
</style>
</head>
<body id="bod">
<table id="id1" style="width:10%">
<tr>
<th>one</th>
<th>two</th>
<th>six</th>
</tr>
<tr>
<td id="td1" class="class1">1</td>
<td id="td2" class="class1">2</td>
<td id="td3" class="class1">3</td>
</tr>
<tr>
<td id="td4" class="class1">4</td>
<td id="td5" class="class1">5</td>
<td id="td6" class="class1">6</td>
</tr>
</table>
<script>
function drawHalfCell(id, col1, col2) {
  const cell = document.getElementById(id);
  if (cell) {
    cell.style.background = `linear-gradient(to bottom right, ${col1} 50%, ${col2} 50%)`;
  }
}
drawHalfCell("td5", "red", "blue");
</script>
</body>
</html>

Now your td5 cell will have the same clean diagonal split as the CSS-rendered cells. If you ever need to support very old browsers, you could add vendor prefixes as fallback, but this standard syntax works for all modern browsers (Chrome, Firefox, Edge, Safari).

内容的提问来源于stack exchange，提问作者dutchy12345