javascript - 使用 document.getElementsByTagName 遍历 dom 元素，将元素作为 jquery 对象传递

Question

我需要的是在某个起始元素处遍历 dom，然后遍历起始元素下方的所有元素。

这是我到目前为止所做的。

function iterDomFromStartElem = function(startElem, callBackFunc) {
    if (startElem !== null) {
        var items = startElem.getElementsByTagName("*");
        for (var i = 0; i < items.length; i++) {
            callBackFunc(items[i]);
        }
    }
}

我需要从某个开始元素遍历 dom 的原因是因为我们的团队最近收到了实现字体大小调整的请求；然而，我们开发的是静态站点，在许多不同的地方使用像素设置字体大小。我意识到更简单的方法是重构现有代码，在页面的根部设置静态字体大小，并在其他地方使用 em/百分比，这样如果企业主想要在页面上进行调整大小控制，我们所要做的就是增加一个地方的字体大小。此重构需要很多时间，而我的任务是用最少的工时完成这项工作。

那么，我有一个像这样定义的回调，

function resizeFont(startElem, scale) {
    iterDomFromStartElem(startElem, function(node) {
        // get current size of node, apply scale, increase font size
    }
}

使用这个原始 javascript 可以工作，但如果它在 css 类中声明，我将无法获取字体大小。

我知道 jquery 有一个 css 属性，如果我有一个 jquery 对象我可以做 $(this).css(....)，所以，

当我调用 callBackFunc(items[i]) 时，如何将 items[i] 转换为 jquery 对象，以便在我的回调函数中，我可以执行 node.css(......)？

我想我可以做 $(items[i].id)，也许这是最简单的。

是否有一种使用 javascript 确定字体大小的更简单方法，即使该字体大小是在 css 类中声明的并且该 css 类已附加到元素？

Answer 1

前言:我认为你最好妥善解决问题。走捷径现在可能会节省一两个小时，但从长远来看，这可能会让你付出代价。

但是你的实际问题是:

how can I convert the items[i] into a jquery object so that in my call back function, I can do node.css(......)?

如果将原始 DOM 对象传递给 $() , jQuery 将返回一个围绕它的包装器。您不必通过 ID。

您还可以获得给定起点的所有后代元素的 jQuery 实例，如下所示:

var x = $("#starting_point *");

...虽然如果您随后循环遍历它，您仍然会创建很多临时对象，如下所示:

$("#starting_point *").each(function() {
    // Here, `this` is the raw DOM element
});

这是一个使用 jQuery 在给定起点下循环所有元素的示例，在本例中显示它们的标签和 id(如果有)并将它们变为蓝色(live copy):

$("#start *").each(function() {
  display(this.tagName + "#" + (this.id || "?"));
  $(this).css("color", "blue");
});

注意我说的是在之下。如果您还想包括 #start，选择器将更改为 #start, #start *。

这是一个增加以给定起点(包括)给定起点开始的元素字体大小的完整示例，其中字体大小由内联和样式表样式 (live copy) 不同地设置:

CSS:

.x13 {
  font-size: 13px;
}
.x17 {
  font-size: 17px;
}
.x20 {
  font-size: 20px;
}

HTML:

<input type="button" id="btnBigger" value="Bigger">
<div id="start" class="x13">
  This is in 13px
  <p style="font-size: 15px">This is in 15px
    <span class="x17">and this is 17px</span></p>
  <ul>
    <li id="the_list_item" style="10px">10px
      <strong style="font-size: 8px">8px
        <em class="x20">five</em>
      </strong>
    </li>
  </ul>
</div>

JavaScript:

jQuery(function($) {

  $("#btnBigger").click(function() {
    $("#start, #start *").each(function() {
      var $this = $(this),
          fontSize = parseInt($this.css("font-size"), 10);
      display("fontSize = " + fontSize);
      $this.css("font-size", (fontSize + 2) + "px");
    });
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});