单击时更改 TD 单元格颜色.如何单击以将其更改回来

我有一个按钮，当我点击这个按钮时，我需要突出显示我的html表的最高值和下限值。

我以这种方式设置了最高表格单元格的背景颜色，这工作正常：

$HighElementToMark.css('background-color', HigherNumberColor);

如何获得分配给$HighElementToMark的颜色？

我想使用类似的东西：

alert(HighElementToMark.style.backgroundColor);

但它不起作用。

此外，当我再次单击按钮时，我需要重置表格单元格的颜色。

有什么建议吗？

提前致谢

element.style只是一个二传手，这意味着你只能设置样式。为了阅读当前样式，您可以使用getComputedStyle(element).backgroundColor .为了跟踪更改，您可能希望将变量设置为标志，例如 isChange 。但是由于我们看不到您的实际实现，因此很难提出任何真正有用的建议

您可以通过以下方式获取颜色：

document.getElementById("HighElementToMark").style.backgroundColor 
$HighElementToMark.css('background-color')

它们都将返回样式的 background-color 属性。如果您仅将element.style视为二传手：

返回样式属性：
元素样式。财产
设置样式属性：
元素样式。属性 = 值
注意：它仅适用于内联样式声明。

至于颜色之间的切换，假设我们保留了一个布尔colorChange标志：

{  // we do this when button is clicked.
     colorChange = !colorChange; 
     var colorToSet = colorChange ? HigherNumberColor : SomeOtherColor;
     $HighElementToMark.css('background-color', colorToSet);
     console.log( $HighElementToMark.css('background-color') );
 }

这样，我们就可以使用标志来跟踪颜色的切换。

<html>
<head>
    <style>
        table {
            width: 75%;
        }
        table > tbody > tr td{
            background-color: #f44242;
        }
        .toggle{
            background-color: #024405;
        }
    </style>
        <script
        src="https://code.jquery.com/jquery-3.4.0.min.js"
        integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
        crossorigin="anonymous"></script>
</head>
<body>
        <table >
            <thead>
                <tr>
                    <th>
                        Column A
                    </th>
                    <th>
                        Column B
                        </th>
                        <th>
                        Column C
                            </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id = "highlightMe" >9</td>
                    <td>6</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table><br/>
        <button type="button" id="highlighter" >Highlight Me</button>
        <script>
            (function(window, document, undefined){
                var toggledColor = '#024405';
                $('#highlighter').click(function(){
                    var $HighElementToMark = $('#highlightMe'); //or your algorithm to identify the correct highest value td
                    /* Method 01 - toggling manually */
                    //$HighElementToMark.css('background-color', !$HighElementToMark.data('hasOriginalBG') ? toggledColor: '') ; //toggle background color
                    //$HighElementToMark.data('hasOriginalBG', ($HighElementToMark.data('hasOriginalBG') ? false : true)); //persist the current status
                    /* Method 02 - toggling using jquery togleclass */
                    //$HighElementToMark.toggleClass('toggle') ;  // you can also use jquery toggle class for this 
                });
            })(window, document);
        </script>
</body>

相关内容

最新更新

热门标签：