javascript - 将函数从 getElementById 重写为 getElementsByClassName 或 getElementsByTagName

Question

我正在使用此代码 RobG来自this answer通过 id 将文本放入动态宽度容器中。但理想情况下我想同时在多个元素上使用它。我如何重写它以与 getElementsByClassName 或 getElementsByTagName 一起使用？

<script>

function resize(el, factor) {

  // Get element width
  var width = el.offsetWidth;

  // set default for factor
  if (typeof factor == 'undefined') {
    factor = 5;
  }

  // Set fontsize to new size
  el.style.fontSize = (width / factor | 0) + 'px';
}

window.onload = function() {
  function doResize() {resize(document.getElementById('fit'), 6);}
  window.onresize = doResize;
  doResize();
}

</script>

<div id="fit">Some text</div>

Answer 1

获取元素并在迭代中调用函数

function resize(el, factor) {
  // Get element width
  var width = el.offsetWidth;

  // set default for factor
  if (typeof factor == 'undefined') {
    factor = 5;
  }

  // Set fontsize to new size
  el.style.fontSize = (width / factor | 0) + 'px';
}

window.onload = function() {
  function doResize() {
      /* get a nodelist */
      var elems = document.getElementsByClassName('myClass');

      /* iterate over nodelist */
      for (var i=elems.length; i--;) {
          resize(elems[i], 6); // call function for each element
      }
  }
  window.onresize = doResize;
  doResize();
}

您最好使用 querySelectorAll('.myClass') 而不是 getElementsByClassName。 IE8 支持它，而 getElementsByClassName 不支持。