CODEWITHSUNDEEP
javascripthtmlcss
Miguel
Miguel

Reputation: 3054

How to get the font-size in JS of a child node from the parent node?

I'm looking for a solution that looks for all anchors tags in a HTML and get the text and the respective font-size.

For example:

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

With the CSS:

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

Should output the respective font size. However, using this solution:

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

I get always the first level font-size:

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

Check the jsfiddle

Upvotes: 2

Views: 586

Answers (1)

segFault
segFault

Reputation: 4054

You could do something like the following to get the child nodes instead.

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>

Upvotes: 2

Related Questions