我试图只使用vanilla JS创建一个函数,它将调整具有给定类的容器中的字体.发现这个演示,好像它会成功.不幸的是,他们的'Javascript'版本实际上使用$()jquery选择器来根据其元素类型和类来定位DOM中的特定元素.

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

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

即我可能有两个h3元素附加'.resize'类,但第一个元素是50px乘100px,第二个元素是200px乘400px.如果我只是根据泛型元素类型和类应用解决方案,那么为第二个元素生成的css规则也将应用于第一个元素.

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

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

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; …

我创建了一个包含图像的div,每个图像都在自己的div中,链接到我网页顶部的不同社交媒体网站.我使用jquery更改img src打开hover然后返回到原始图像.图像均为24x24px,容器高24px.Firefox仍然存在兼容性问题,但我现在并不那么担心它们.我遇到的问题是,当我将鼠标移到图像上时,所有内容都会发生变化并完全变回,但图像会自动降低一两个像素,并在底部切断.当我悬停时,外面的两个图像不会移动,它只是中间的图像.

该网站可以在这里找到:

http://tfsm.org/flagshiptest/