Question

我是初学者。试图从Javascript对角分割表格单元格。我知道如何从CSS做到这一点。

下面是一些测试代码。在单元格1,2,3,4和6中，我得到了我想要使用CSS的结果。但是，我必须填写Javascript的背景，因为我必须计算单元格的位置。

我在这个论坛上发现了他们使用的内容（对于Chrome），另请参阅我的测试代码，但是，我可以让它像我用CSS获得的结果一样工作。谁知道怎么做？提前谢谢

<!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) {
            document.getElementById(id).style.background = "-webkit-linear-gradient(bottom right," + col1 + " 50%, " + col2 + " 50%)";
        }

        drawHalfCell("td5", "red", "blue");

    </script>
</body>

</html>

来自CSS的线性渐变与来自Javascript

0 个答案: