javascript – 使用document.getElementsByTagName迭代dom元素,将元素作为jquery对象传递

我需要的是在某个start元素处迭代dom,然后遍历start元素下面的所有元素.

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

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

我需要从一些start元素迭代dom的原因是因为我们的团队最近收到了实现字体大小调整的请求;但是,我们使用像素在很多不同的地方静态开发了font-size字段.我意识到更简单的方法是重构现有代码,在页面根目录设置静态字体大小,并在其他地方使用em /百分比,这样如果业务所有者想要对页面进行调整大小控制,我们所要做的就是在一个地方增加字体大小.这个重构需要很多小时,而且我使用最少的工时来完成这项任务.

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

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

使用这个原始的JavaScript可以工作,但如果它在css类中声明,我将无法获得font-size.

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

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

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

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

解决方法:

前言：我认为你最好妥善解决问题.你现在可以通过快捷方式节省一两个小时,但从长远来看可能会花费你.

但重新提出你的实际问题：

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将返回一个包装器.您无需通过身份证.

您还可以为给定起点的所有后代元素获取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);
  }

});

javascript – 使用document.getElementsByTagName迭代dom元素,将元素作为jquery对象传递

相关文章