在JavaScript中按字體大小選擇DOM節點

我有不同風格的html內容。我需要找到使用font-size的節點。例如，找到有font-size: 10pt的節點。在JavaScript中按字體大小選擇DOM節點

.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一個節點。

來源

2017-04-21 Paul Anburaj

你真的需要找到與字體大小的所有DOM元素或使用該字體大小所有CSS類？ – Sirko

@Sirko我需要具有該字體大小的所有DOM元素 –

[選擇具有特定CSS的所有元素，使用jQuery]可能的重複（http://stackoverflow.com/questions/1220834/select-all-elements-that -have-a-specific-css-using-jquery） –

這是不是很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>

來源

2017-04-21 06:12:25 Sojtin

你剛纔循環

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

來源

2017-04-21 06:12:52 monkeyinsight

'style.fontSize =='10pt''如果字體是由CSS設置的，而不是JS，則不起作用。請參閱：https://stackoverflow.com/questions/15195209/how-to-get-font-size-in-html – flen

@flen right，雖然我們可以將返回的大小轉換爲「pt」，然後比較？ :-)不是很了不起，但仍然有效！（正如我在回答中所添加的） – tanmay

@tanmay，你的答案（它與Sojtin btw的代碼具有相同的代碼）使用$ el.css，它返回計算出的樣式，因此，這個元素不關心.style.prop！== getCOmputedStyle（elem）.prop'問題 – Kaiido

如果你想在points (e.g. 10pt) speicifically使用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>

來源

2017-04-21 06:23:00 tanmay

JS香草，計算計算樣式，具有精度選項

基本上我把每個人的答案位，將它們結合在一起，加額外的選項，刪除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>

來源

2017-04-21 06:49:59

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

來源

2017-04-21 07:16:02

如果我們得到屬性值，那麼我怎麼能從外部CSS獲得值 –

在JavaScript中按字體大小選擇DOM節點

回答

相關問題