如何按类型和 class 定位元素

Question

我正在尝试创建一个仅使用 vanilla JS 的函数，它将在给定 class 的容器中调整字体大小。发现 this demo，这似乎可以解决问题。不幸的是，他们的 'Javascript' 版本实际上使用 $() jquery 选择器根据元素类型和 class.[=14 来定位 DOM 中的特定元素=]

由于 vanilla JS 不允许这样做，我不确定如何应用该解决方案。

逻辑让我感到困惑，我需要准确地定位元素并且可能有多个具有相同 class 的相同元素的实例，所有这些都需要单独处理。

即我可能有两个附加了“.resize”class 的 h3 元素，但第一个元素是 50px x 100px，第二个是 200px x 400px。如果我简单地应用基于通用元素类型和 class 的解决方案，那么为第二个元素生成的 css 规则也将应用于第一个。

我能想到的唯一方法是为每个元素使用唯一 ID 而不是“.replace”class，然后创建一个包含预定义 ID 的数组并迭代数组来定位每个元素。此解决方案不够优雅或可扩展。

我已经修改了函数以仅使用 vanilla JS 来定位 .style.fontSize 属性，但现在我得到了一个无限循环。

JS:

function autoSize () {
  var el, elements, _i, _len, _results;
  elements = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _results = [];
  for (_i = 0, _len = elements.length; _i < _len; _i++) {
    el = elements[_i];
    _results.push((function(el) {
      var resizeText, _results1;
      resizeText = function() {
        var elOldFontSize = el.style.fontSize;
        var elNewFontSize;


        elNewFontSize = (parseInt(elOldFontSize.slice(0, -2)) - 1) + 'px';
        el.style.fontSize = elNewFontSize;
      };
      _results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        _results1.push(resizeText());
      }
      return _results1;
    })(el));
  }
  return _results;
}

Answer 1

Vanilla JS 不允许这样做，但浏览器风格的 Vanilla JS 允许。它被称为 document.querySelector (docs) and document.querySelectorAll (docs).

文档中的示例：

在此示例中，返回文档中具有 class "myclass" 的第一个元素：

var el = document.querySelector(".myclass");

此示例 returns 文档中所有 div 元素的列表，其中 class 为 "note" 或 "alert":

var matches = document.querySelectorAll("div.note, div.alert");

如何按类型和 class 定位元素

How to target element by type and class

html

javascript

css

dynamic

getelementsbytagname

JS: