Select DOM nodes by their font size in JavaScript
I have html content with different styles. I need to find a node using font-size
. For example, find nodes with 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
.
source to share
If you want to use font-size
in text points (e.g. 10pt)
, you can convert the font-size
returned in px
with fontSize * 72 / 96
to pt
, and then compare it with 10
or whatever font you have.
Used Math.round
to handle conversion precision.
Find a working snapshot 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>
source to share
It's not pretty select
, but it might suit 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>
source to share
JS Vanilla, compute computed styles with precision option
Basically I took the answers to all the answers, combined them, added more options, removed the 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>
source to share
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..
:)
source to share