时间戳

首页 > 解决方案 > 如何从父节点获取子节点的JS字体大小？

javascript - 如何从父节点获取子节点的JS字体大小？

问题描述

我正在寻找一种解决方案来查找 HTML 中的所有锚标记并获取文本和相应的字体大小。

例如：

<a href="#">First test</a>   
<a href="#"><h2> Second  test</h2></a>
<a href="#"><p>Third Test</p></a>

使用 CSS：

a{
  font-size: 40px;
}    
h2{
  font-size: 20px;
}    
p{
  font-size: 10px;
}

应该输出相应的字体大小。但是，使用此解决方案：

var a = document.getElementsByTagName('a');
for (var i= 0; i < a.length; ++i){
    var style    = window.getComputedStyle(a[i], null).getPropertyValue('font-size');
    var fontSize = parseFloat(style); 
    console.log(a[i].textContent + "  | font-size:" + fontSize);  
    console.log("-----------");    
}

我总是得到第一级字体大小：

"First test  | font-size:40"
"-----------"
" Second  test  | font-size:40"
"-----------"
"Third Test  | font-size:40"
"-----------"

检查jsfiddle

标签： javascripthtmlcss

解决方案

您可以执行以下操作来获取子节点。

var a = document.getElementsByTagName('a');
for (var i = 0; i < a.length; i++) {
  let node = a[i];
  let children = node.childNodes;
  for (child of children) {
    if (child.nodeType === 1) {
     node = child;
     break;
    }
  }
  var style = window.getComputedStyle(node, null).getPropertyValue('font-size');
  var fontSize = parseFloat(style);
  console.log(a[i].textContent + "  | font-size:" + fontSize);
  console.log("-----------");
}
a {
  font-size: 40px;
}

h2 {
  font-size: 20px;
}

p {
  font-size: 10px;
}
<a href="#">First test</a>
<a href="#">
  <h2> Second test</h2>
</a>
<a href="#">
  <p>Third Test</p>
</a>

推荐阅读