使用 JavaScript 修改"Span"时禁用悬停效果

Question

我有一个文本字段，并且有一个最大字符计数器(不使用maxlength在我的HTML)。它的工作原理是这样的:它从500个字符开始，随着你输入，这个数字会减少。计数器在文本字段的下面。当它变为0时，它将变为负值，JavaScript将其变为红色。

这里有一个问题:我有一个"发送"按钮(发送消息)，在我的CSS中，在hover上，它将把背景颜色改为稍微暗一点。当您的最大字符数低于0时，我让JavaScript将"Send"按钮的背景颜色更改为灰色。当您删除字符并最终将字符计数从底片中取出时，我希望按钮再次正常显示。然而，当我把鼠标悬停在"发送"按钮上，当它变回正常时，背景并没有变暗(但当我回到底片时，背景会变成灰色)。

以下是我的HTML和JavaScript代码(我假设CSS代码已经是可预测的):

<form><textarea class="areas" id="type_area" placeholder="Chat..." onkeyup="charsLeft()" onkeydown="charsLeft()"></textarea></form>
    <div id="char_count">
        <span id="charsLeftH" title="Characters Remaining" style="cursor: pointer">500</span>
    </div>
    <input type="button" value="Send" id="submit">
        <script>
            var chars = 500;
            function charsLeft() {
                chars = 500 - $("#type_area").val().length;
                document.getElementById("charsLeftH").innerHTML=chars;
                if (chars < 50 && chars > 0) {
                    document.getElementById("charsLeftH").style.color="#9A9A00";
                } else if (chars < 1) {
                    document.getElementById("charsLeftH").style.color="#BD2031";
                } else {
                    document.getElementById("charsLeftH").style.color="#000000";
                }
            };
        </script>

编辑:我试图复制Twitter的"撰写tweet"框，如果这看起来不够相似的话。:)

Answer 1

JavaScript将样式放在元素的style属性中，该属性通常会覆盖CSS。

最好的解决方案是删除style属性，而不是指定"正常"颜色:

if (chars < 500 && chars > 0) {
    document.getElementById("charsLeftH").removeAttribute("style");
}

Answer 2

removeAttribute("style")无法工作。但我找到了解决办法!

        <div id="char_count">
            <span id="charsLeftH" title="Characters Remaining" style="cursor: pointer">500</span>
        </div>
        <input type="button" value="Send" id="submit">
        <script>
            var chars = 500;
            function charsLeft() {
                chars = 500 - $("#type_area").val().length;
                document.getElementById("charsLeftH").innerHTML=chars;
                if (chars < 50 && chars > 0) {
                    document.getElementById("charsLeftH").style.color="#9A9A00";
                    document.getElementById("submitX").id="submit";
                } else if (chars < 1) {
                    document.getElementById("charsLeftH").style.color="#BD2031";
                    if (chars < 0) {document.getElementById("submit").id="submitX";}
                } else {
                    document.getElementById("charsLeftH").style.color="#000000";
                    document.getElementById("submitX").id="submit";
                }
            };
            charsLeft();
        </script>

我改变了按钮的ID，在我的CSS中，我为另一个ID (#submitX)添加了另一个灰色背景的样式。当它从底片中退出时，它会将新的提交按钮(#submitX)更改为#submit，然后当它返回底片时，它会重复。