Question

我有一个不同风格的HTML内容。我需要使用font-size找到节点。例如，查找具有font-size: 10pt。

的节点

＆＃13;

.classname1 {
  color: red;
  font-size: 10pt;
}

.classname2 {
  color: red;
  font-size: 11pt;
}

.classname3 {
  color: red;
  font-size: 12pt;
}

.classname4 {
  color: green;
  font-size: 10pt;
}

＆＃13;

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

＆＃13;

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

Answer 1

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

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

查找以下工作片段：

＆＃13;

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

＆＃13;

.classname1 {
  color: red;
  font-size: 10pt;
}

.classname2 {
  color: red;
  font-size: 11pt;
}

.classname3 {
  color: red;
  font-size: 12pt;
}

.classname4 {
  color: green;
  font-size: 10pt;
}

＆＃13;

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

＆＃13;

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，使用精确选项计算计算样式

基本上我采用了每个人的答案，结合它们，添加了额外的选项，删除了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

5 个答案: