0

假设我有两张桌子,一张有白色行,一张有所有绿色行。

我目前有针对白色背景执行此操作的 stripeTable 代码:

function stripeTables($tables) {
    $("tbody tr:odd td,tbody tr:odd th", $tables).css("background-color", "#f7f6f6");
}

但我想要一个使奇数行更暗的函数,这样如果基础背景不是白色,它仍然只是改变“一些 RGB”值“更暗”,这样我就不必选择一个不同的颜色。

关于如何快速做到这一点的任何想法?我正在考虑读取背景的 RGB 值,然后为它计算一个更暗的值,但我对如何做到这一点一无所知。

更新:

jquery-color解决方案的问题 是我需要提供当前的 bg 颜色,因为可以在 td/th 级别和 tr 级别和 TABLE 级别以及上面的任何其他元素上设置我真的不能确定我的桌子将以颜色 X 作为背景。至少在使用 $(this).css('background-color') 时不会,(如果背景颜色未在我应用条纹颜色的 CSS 级别定义,则返回 undefined。

以jQuery 和颜色计算中介绍的方式使用 jsColors getRGB 函数

function stripeTables($tables) {
    //    $("tbody tr:odd td,tbody tr:odd th", $tables).css("background-color", "#f7f6f6");
    $("tbody",$tables).each(function () {
        $("tr:odd td,tr:odd th", $(this)).css('background-color', function () {

            var rgb = getRGB($(this).css('background-color'));
            if (!rgb) {
                rgb = getRGB("#FFF");
            }
            for (var i = 0; i < rgb.length; i++) {
                rgb[i] = Math.max(0, rgb[i] - 10);
            }
            var newColor = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
            return newColor;

        }, 1500);
    });
}

代码现在只适用于白色背景:

具体更新的问题,我需要了解元素的实际背景颜色 hex/rgb,即使它没有设置在那个 CSS LEVEL

4

0 回答 0