4

我需要的是在某个起始元素处遍历 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/percentages，这样如果企业主想要对页面进行调整大小控制，我们所要做的就是在一处增加字体大小。这个重构需要很多小时，而我的任务是使用最少的工时。

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

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)，也许这是最简单的。

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

4

1 回答 1

4

前言：我认为你最好妥善解决问题。您现在可以通过走捷径节省一两个小时，但从长远来看可能会花费您。

但你的实际问题是：

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

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

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

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

...尽管如果您随后循环遍历它，您最终仍会创建很多临时对象，如下所示：

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

这是一个使用 jQuery 在给定起点下循环所有元素的示例，在这种情况下显示它们的标签和id（如果有）并将它们变成蓝色（实时副本）：

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

注意我在. 如果您还想包含#start，选择器将更改为#start, #start *。

这是一个增加元素字体大小的完整示例，从（并包括）给定的起点开始，其中字体大小由内联和样式表样式（实时副本）不同地设置：

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);
  }

});
于 2011-07-25T21:40:38.833 回答