在JavaScript中按字体大小选择DOM节点

Question

我有一个不同风格的HTML内容。 我需要使用font-size找到节点。 例如，查找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>

在这段代码中，我需要找到一个样式为font-size: 10pt的节点。

Answer 1

如果要在points (eg 10pt)使用font-size ，可以使用fontSize * 72 / 96将px返回的font-size转换为pt ，然后将其与10或您拥有的任何字体大小进行比较。

使用Math.round处理转换精度。

查找下面的工作片段：

 $(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>

Answer 2

这不是很好的select ，但可能会满足您的需求：

 $('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>

Answer 3

你只需遍历所有元素

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]);
     }
}

Answer 4

JS Vanilla，使用精度选项计算Computed样式

基本上我采取了每个人的答案，结合它们，添加了额外的选项，删除了jQuery依赖。

 /*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>

Answer 5

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..

:)

在JavaScript中按字体大小选择DOM节点

问题描述

5 个解决方案

解决方案1
3 2017-04-21 06:23:00

解决方案2
1 2017-04-21 06:12:25

解决方案3
0 2017-04-21 06:12:52

解决方案4
0 2017-04-21 06:49:59

解决方案5
0 2017-04-21 07:16:02

在JavaScript中按字体大小选择DOM节点

问题描述

5 个解决方案

解决方案1 3 2017-04-21 06:23:00

解决方案2 1 2017-04-21 06:12:25

解决方案3 0 2017-04-21 06:12:52

解决方案4 0 2017-04-21 06:49:59

解决方案5 0 2017-04-21 07:16:02

解决方案1
3 2017-04-21 06:23:00

解决方案2
1 2017-04-21 06:12:25

解决方案3
0 2017-04-21 06:12:52

解决方案4
0 2017-04-21 06:49:59

解决方案5
0 2017-04-21 07:16:02