Select DOM nodes by their font-size in JavaScript

Question

I have a html content with different styles. I need to find the node using font-size. For example, find nodes which had font-size: 10pt.

.classname1 {
  color: red;
  font-size: 10pt;
}

.classname2 {
  color: red;
  font-size: 11pt;
}

.classname3 {
  color: red;
  font-size: 12pt;
}

.classname4 {
  color: green;
  font-size: 10pt;
}

<p>Hello <span class="classname1">world!</span></p>
<p>Hello <span class="classname2">Paul</span></p>
<p>Hello <span class="classname3">raj</span></p>
<p>Hello <span class="classname4">moon</span></p>

In this code I need to find a node with style font-size: 10pt.

You really need to find all DOM elements with that font-size or all CSS classes using that font-size? — Sirko, Apr 21 '17 at 06:05
Possible duplicate of [Select all elements that have a specific CSS, using jQuery](http://stackoverflow.com/questions/1220834/select-all-elements-that-have-a-specific-css-using-jquery) — Exception_al, Apr 21 '17 at 06:12
Should this be restrictive to other units ? I mean, do you also want to find elements that have the font-size set to e.g `13.3333px` ? — Kaiido, Apr 21 '17 at 06:30
@Kaiido i just asked the example with `font-size:10pt`. i also want to find elements with different font-size — Paul Anburaj, Apr 21 '17 at 06:33
Alright, then you already have got two correct answers (since 72 / 96 === .75) — Kaiido, Apr 21 '17 at 06:35

score 3 · Answer 1 · answered Apr 21 '17 at 06:23

If you want to use font-size speicifically in points (e.g. 10pt), you can convert the font-size returned in px using fontSize * 72 / 96 to pt and then compare it with 10 or whichever font-size you have.

Used Math.round for handling precision in conversion.

Find working snippet below:

$(document).ready(function() {
  var x = $('*').filter(function() {
    return Math.round(parseFloat($(this).css("font-size")) * 72 / 96) === 10
  });
  console.log(x.length)
});

.classname1 {
  color: red;
  font-size: 10pt;
}

.classname2 {
  color: red;
  font-size: 11pt;
}

.classname3 {
  color: red;
  font-size: 12pt;
}

.classname4 {
  color: green;
  font-size: 10pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <p>Hello <span class="classname1">world!</span></p>
  <p>Hello <span class="classname2">Paul</span></p>
  <p>Hello <span class="classname3">raj</span></p>
  <p>Hello <span class="classname4">moon</span></p>
</body>

score 1 · Answer 2 · answered Apr 21 '17 at 06:12

This is not very select by, but maybe will fits your needs:

$('p > span').each(function() {
  var pt = Math.round(parseFloat($(this).css('font-size')) * 0.75);
  if(pt == 10) {
    $(this).css('color', 'pink');
  }
});

  .classname1 {
    color: red;
    font-size: 10pt;
  }

  .classname2 {
    color: red;
    font-size: 11pt;
  }

  .classname3 {
    color: red;
    font-size: 12pt;
  }

  .classname4 {
    color: green;
    font-size: 10pt;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello <span class="classname1">world!</span></p>
<p>Hello <span class="classname2">Paul</span></p>
<p>Hello <span class="classname3">raj</span></p>
<p>Hello <span class="classname4">moon</span></p>

score 0 · Answer 3 · answered Apr 21 '17 at 06:12

0

You just loop through all elements

var all = document.getElementsByTagName("*");
var sel = [];
for (var i=0, max=all.length; i < max; i++) {
     if (all[i].style.fontSize == '10pt') {
          sel.push(all[i]);
     }
}

answered Apr 21 '17 at 06:12

monkeyinsight

4,719
1
20
28

2

`style.fontSize == '10pt'`won't work if the font was set by CSS, and not JS. Please see: https://stackoverflow.com/questions/15195209/how-to-get-font-size-in-html – flen Apr 21 '17 at 06:16
@flen right, though we could convert the returned size to `pt` and then compare? :-) not so amazing but still works! (as I added in answer) – tanmay Apr 21 '17 at 06:26
1

@tanmay, your answer, (which has the same code as the one by Sojtin btw) uses $el.css, which returns the computed style and, hence, which is not concerned by this `element.style.prop !== getCOmputedStyle(elem).prop` problem – Kaiido Apr 21 '17 at 06:29
1

@tanmay exactly like Kaiido said, the problem with monkeyinsght's answer is that `all[i].style.fontSize` will return an empty string if it was set by CSS. Try monkeyinsight's code on this StackOverflow page with '15px' instead of '10pt'. You'll see it won't return anything at all (I just tried it) – flen Apr 21 '17 at 06:34
@flen yes, thanks for the explanation.. got the difference! – tanmay Apr 21 '17 at 06:40
this is not working for external css and internal css.it's working only for inline css – Paul Anburaj Apr 24 '17 at 09:09

Adam K. · Answer 4 · 2017-04-21T06:58:26.620

JS Vanilla, calculate Computed styles, with precision option

Basically i took bits of everyones answers, combined them, added extra options, removed jQuery dependency.

/*Settings*/
var decimalPrecision = 0; //with precision 3 - Test6 will not get selected
var targetSize = 10; //pt
var targetElems = document.querySelectorAll(".check");//css selector, IE8+

for (var i = 0, max = targetElems.length; i < max; i++) {
  var fontSize = window.getComputedStyle(targetElems[i], null)['font-size'];//IE9+
  fontSize = (parseFloat(fontSize.substr(0, fontSize.length - 2)) * 72 / 96).toFixed(decimalPrecision);
  if (fontSize == targetSize)targetElems[i].classList.add("targetSize");
}

.targetSize {
  color: red;
}

.a1 {
  font-size: 10px;
}

.a2 {
  font-size: 10pt;
}

.a3 {
  font-size: 11pt;
}

.a4 {
  font-size: .8333rem;
}

.a5 {
  font-size: 1rem;
}

.a6 {
  font-size: 13.3px;
}

<div class="a1 check">Test1</div>
<div class="a2 check">Test2</div>
<div class="a3 check">Test3</div>
<div class="a4 check">Test4</div>
<div class="a5 check">Test5</div>
<div class="a6 check">Test6</div>

score 0 · Answer 5 · answered Apr 21 '17 at 07:16

0

var tag=document.getElementsByTagName('p');
for(var i=0;i<tag.length;i++)
{ 
if(parseFloat(window.getComputedStyle(tag[i].childNodes[1], null).getPropertyValue('font-size'))=='13.3333')
{
console.log(tag[i].childNodes[1])
}};

Use this JS code and you will get what you want..
You have to compare the font as in a little difference between pixel and pt..

:)

answered Apr 21 '17 at 07:16

Monika Rani

811
1
6
10

if we get the property value then how can i get the value from external css – Paul Anburaj Apr 24 '17 at 09:10

Select DOM nodes by their font-size in JavaScript

5 Answers5