Cách lấy cỡ phông chữ trong HTML

Question

Tôi đã đọc một câu hỏi ở đây cố gắng lấy kích thước phông chữ của văn bản. Câu trả lời họ đưa ra là lấy kích thước pixel bằng phương pháp đo. Tất cả tôi muốn để có thể làm là có được giá trị kích thước font chữ vì vậy tôi có thể thay đổi nó.

Ví dụ:

var x = document.getElementById("foo").style.fontSize; 
document.getElementById("foo").style.fontSize = x + 1; 

Ví dụ này không hoạt động mặc dù hai làm

1. document.getElementById("foo").style.fontSize = "larger";
2. document.getElementById("foo").style.fontSize = "smaller";

Vấn đề duy nhất là nó chỉ thay đổi kích thước Một lần.

Answer 1

Chỉ cần lấy style.fontSize của phần tử có thể không hoạt động. Nếu font-size được định nghĩa bởi biểu định kiểu, điều này sẽ báo cáo "" (chuỗi trống).

Bạn nên sử dụng window.getComputedStyle.

var el = document.getElementById('foo'); 
var style = window.getComputedStyle(el, null).getPropertyValue('font-size'); 
var fontSize = parseFloat(style); 
// now you have a proper float for the font size (yes, it can be a float, not just an integer) 
el.style.fontSize = (fontSize + 1) + 'px'; 

Answer 2

Giá trị bạn nhận được từ fontSize giống như "12px" hoặc "1,5em", do đó việc thêm 1 vào chuỗi đó sẽ dẫn đến "12px1" hoặc "1,5em1". Bạn có thể lấy kích thước phông chữ và thao tác với kích thước phông chữ:

var fontSize = parseInt(x); 
fontSize = fontSize + 1 + "px"; 
document.getElementById("foo").style.fontSize = fontSize; 

Answer 3

Nếu bạn đang sử dụng Jquery thì đây là giải pháp.

var fontSize = $("#foo").css("fontSize"); 
fontSize = parseInt(fontSize) + 1 + "px"; 
$("#foo").css("fontSize", fontSize); 

Hy vọng điều này sẽ hiệu quả.

Answer 4

Nếu phần tử của bạn không có thuộc tính kích thước phông chữ, mã của bạn sẽ trả về chuỗi trống. Không cần thiết yếu tố của bạn nên có thuộc tính kích thước phông chữ. Phần tử có thể kế thừa các thuộc tính từ các phần tử cha.

Trong trường hợp này, bạn cần phải tìm kích thước phông chữ được tính toán. Hãy thử điều này (không chắc chắn về IE)

var computedFontSize = window.getComputedStyle(document.getElementById("foo")).fontSize; 

console.log(computedFontSize); 

Biến tính toánFontSize sẽ trở lại với đơn vị kích thước phông chữ. Nó có thể là px, em,%. Bạn cần phải loại bỏ các đơn vị để thực hiện một phép toán số học và gán giá trị mới.

Answer 5

Hãy thử điều này nó chắc chắn sẽ giúp bạn trong việc xác định kích thước phông chữ

var elem = document.createElement('div'); 
var t=document.createTextNode('M') 
elem.appendChild(t); 
document.body.appendChild(elem); 

var myfontSize = getStyle(elem,"fontSize") 
alert(myfontSize) 
document.body.removeChild(elem); 

function getStyle(elem,prop){ 
if (elem.currentStyle) { 
var res= elem.currentStyle.margin; 
} else if (window.getComputedStyle) { 
if (window.getComputedStyle.getPropertyValue){ 
var res= window.getComputedStyle(elem, null).getPropertyValue(prop)} 
else{var res =window.getComputedStyle(elem)[prop] }; 
} 
return res; 
} 

chúng tôi có thể tiếp tục sử dụng phương thức getter và setter để xác định xem fontsize được thay đổi sau đó bằng bất kỳ mảnh mã

Answer 6

1. nếu phần tử html có kiểu nội tuyến, bạn có thể sử dụng .style.fontSize để nhận kích thước phông chữ !
2. khi các yếu tố html không có inline style, bạn phải sử dụng Window.getComputedStyle() chức năng để có được những font-size!

đây là mã demo của tôi!

function tureFunc() { 
 
    alert(document.getElementById("fp").style.fontSize); 
 
    console.log(`fontSize = ${document.getElementById("fp").style.fontSize}`); 
 
} 
 
function falseFunc() { 
 
    alert(false ? document.getElementById("fh").style.fontSize : "check the consloe!"); 
 
    console.log(`fontSize = ${document.getElementById("fh").style.fontSize}`); 
 
} 
 
function getTheStyle(){ 
 
    let elem = document.getElementById("elem-container"); 
 
    let fontSize = window.getComputedStyle(elem,null).getPropertyValue("font-size"); 
 
    // font-size !=== fontSize 
 
    console.log(`fontSize = ${fontSize}`); 
 
\t alert(fontSize); 
 
    document.getElementById("output").innerHTML = fontSize; 
 
} 
 
// getTheStyle();

<p id="fp" style="font-size:120%"> 
 
    This is a paragraph. 
 
    <mark>inline style : <code>style="font-size:120%"</code></mark> 
 
</p> 
 
<button type="button" onclick="tureFunc()">Return fontSize</button> 
 
<h3 id="fh"> 
 
    This is a H3. <mark>browser defualt value</mark> 
 
</h3> 
 
<button type="button" onclick="falseFunc()">Not Return fontSize</button> 
 
<div id="elem-container"> 
 
<mark>window.getComputedStyle & .getPropertyValue("font-size");</mark><br/> 
 
<button type="button" onclick="getTheStyle()">Return font-size</button> 
 
</div> 
 
<div id="output"></div>

link tham khảo:

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle