Question

我有一个<div嵌套，如下所示

<div>Main Issue
      <div>Level1
             <div>Sublevel</div>
             <div>Another sublevel</div>
      </div>
      <div>Level2
             <div>Second sublevel</div>
      </div>
</div>

我需要一个js函数来生成ONE TIME UPDATE，使得所有子级别元素都有较小的字体，但所有兄弟姐妹都有相同的字体大小。

我没有使用css : div < div的原因是因为我可能会将其他元素附加到分区，因此我需要将字体大小仅应用于上述骨架

这就是我尝试过的。但它会使所有后续div元素变小

var ic = 0; 
var fontSize = 1;
    var test = function(parent) { 
        var children = nodes[parent]; 
        fontSize = 1; 
        fontSize = fontSize == 4 ? 4 : fontSize+1;
        div.append("<h"+fontSize+">" + parent + "</h"+fontSize+">");  
        } 

        for (ic in children) {
            var child = children[ic]; 
            div.append(test(child)); 
            if (ic == children.length - 1) {
            fontSize = 1;  
            } 
        }
        return div; 
    }

Answer 1

通过DOM递归并从16px开始将每个级别调整为-2px。或者，您可以使用与深度和字体大小相关的对象替换递减级别。此外，这将命中文档中的每个元素，您可能希望将迭代更改为从document.body以外的其他位置开始。

(function fonts(parent,depth){
 for(var i = 0; i < parent.children.length; i++){
  var child = parent.children[i];
  child.style.fontSize = (16-2*depth)+"px";
  if(child.firstChild != null ) fonts(child,depth+1);
 }
})(document.body,0)

<div>Main Issue
      <div>Level1
             <div>Sublevel</div>
             <div>Another sublevel</div>
      </div>
      <div>Level2
             <div>Second sublevel</div>
      </div>
</div>

如何通过分区嵌套使字体大小变小？

1 个答案: