在JavaScript中按字體大小選擇DOM節點
[英]Select DOM nodes by their font-size in JavaScript
問題描述
我有一個不同風格的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 個解決方案
解決方案1
3 2017-04-21 06:23:00
如果要在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>
解決方案2
1 2017-04-21 06:12:25
這不是很好的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>
解決方案3
0 2017-04-21 06:12:52
你只需遍歷所有元素
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]);
}
}
解決方案4
0 2017-04-21 06:49:59
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>
解決方案5
0 2017-04-21 07:16:02
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，JQuery，DOM操作）
[英]Increase font-size on all numbers on page (Javascript, JQuery, DOM manipulation)
使用JavaScript將element的font-size設置為另一個元素的font-size的倍數
[英]set font-size of element to be multiple of a font-size of another element using JavaScript
使用javascript / jquery計算textinput的字體大小
[英]Calculating the Font-size of textinput using javascript/jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.