javascript - getElementById 到 getElementsByClassName

Question

这个问题已经有答案了:

What do querySelectorAll and getElementsBy* methods return? (12 个回答)

已关闭 9 年前。

我有这个正在运行的代码。但它仅适用于一个文本区域，因为它使用 ID。不过，我想将其用于我的代码上的所有文本区域。我尝试过 getElementsByClassName 但没有成功。

HTML:

<textarea id="textarea1" class="form-control page-textarea" rows="4" style="height:92px;" name="memory" placeholder="new comment..."></textarea>

JS:

<script type="text/javascript">
  var textarea = document.getElementById("textarea1");
  var limit = 200;

textarea.oninput = function() {
  textarea.style.height = "";
  textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";

  if(textarea.style.height == "92px"){
    textarea.style.overflow = "hidden";
  } else if(textarea.style.height < limit  + "px"){
    textarea.style.overflow = "hidden";
  } else {
    textarea.style.overflow = "auto";
  }
};
</script>

我该怎么做？

Answer 1

如果你看一下docs您将看到 getElementsByClassName 返回一个 HTMLCollection。您必须循环遍历所有子元素才能使其工作。

var textareas = document.getElementsByClassName("form-control page-textarea");
var limit = 200;

for(var i=0, length= textareas.length; i < length; i++){
   var textarea = textareas[i];
   textarea.oninput = function() {
    this.style.height = "";
    this.style.height = Math.min(this.scrollHeight, limit) + "px";

    if(this.style.height == "92px"){
      this.style.overflow = "hidden";
    } else if(this.style.height < limit  + "px"){
      this.style.overflow = "hidden";
    } else {
      this.style.overflow = "auto";
    }
  };
}

FIDDLE