在JavaScript中按字体大小选择DOM节点
在JavaScript中按字体大小选择DOM节点
提问于 2017-04-21 14:03:48
我有一个不同风格的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的节点。
回答 5
Stack Overflow用户
发布于 2017-04-21 14:23:01
如果您想在points (e.g. 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>
Stack Overflow用户
发布于 2017-04-21 14:12:25
这不太适合select by，但可能会满足您的需求：
$('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>
Stack Overflow用户
发布于 2017-04-21 14:12:53
您只需遍历所有元素
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]);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43535050
复制相关文章
相似问题
腾讯云开发者
