Question

我正在尝试更改div onkeypress的类和textarea的onkeyup。但是只有文本在div内部而不是类本身发生变化。我不希望div中的文本只改变div的类。

JS

var timer = 0;

    function reduceTimer() {
      timer = timer - 1;
      isTyping(true);
    }

    function isTyping(val) {
      if (val == 'true') {
        document.getElementById('typing_on').innerHTML = "Class1";
      } else {

        if (timer <= 0) {
          document.getElementById('typing_on').innerHTML = "Class2";
        } else {
          setTimeout("reduceTimer();", 500);
        }
      }
    }

CSS

.class1 {
  display: block;
  width: 50px;
  height: 20px;
  background-color: red;
}

.class2 {
  display: block;
  width: 50px;
  height: 20px;
  background-color: yellow;
}

HTML

<textarea onkeypress="isTyping('true'); timer=5;" onkeyup="isTyping('false')" name="textarea" cols="45" rows="5">
</textarea>
<div id="typing_on" class="class2">Class2</div>

Answer 1

document.getElementById('typing_on').innerHTML = "Class1";

这将改变div的innerHTML或内容。你需要提供

document.getElementById('typing_on').className = "Class1";

Answer 2

您可以使用+选择器更改样式。

  #text:focus + #typing_on {
    background-color: red;
  }

https://jsfiddle.net/2k6pzy2y/

Answer 3

尝试做这样的事情：

document.getElementById('typing_on').className = "Class1";

Answer 4

你可以在jquery中轻松地做到这一点检查https://jsfiddle.net/bullet/f4y4kskj/

Ena/n Dana/n Cara/n Baba/n Ana

在textarea中输入时更改div的类

4 个答案: