ユーザーの嗜好に基づいて、アプリケーション間でCSSフォントサイズを動的に変更します。

Question

ユーザー入力のエントリに基づいてアプリケーションのフォントサイズを変更する必要がありますか？私はCSS変数について知っているし、すべてのクラスでそれを使用していますが、これはブラウザ間でのサポートが限られています。

たとえば、ユーザーが14pxを選択すると、すべてのコントロールとテキストのフォントサイズが14pxに変更されます。

どうすればいいですか？

Answer 1

REMでfont-sizeを使用します。 1 Remはhtmlのベースフォントサイズを使用しました。あなたが身体にフォントサイズを与える場合など、動的にあなたが達成することができます。このコード

var html = document.getElementsByTagName('html')[0]; 
 

 
var input = document.getElementById('font-size'); 
 

 
input.addEventListener('input', function(e) { 
 
\t html.style.fontSize = ""+e.target.value+"px"; 
 
    console.log(html.style.fontSize) 
 
})

html { 
 
    font-size: 16px; 
 
} 
 

 
p { 
 
    font-size: 2rem; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati rerum numquam, dolorem ad ducimus. Commodi provident mollitia labore voluptatum itaque quasi eligendi, ipsam obcaecati nostrum cum aperiam doloremque ab consectetur?<p> 
 

 
<input id="font-size" type="text" value="">

Answer 2

を参照してください。この

function setFont() 
 
{ 
 
    var x = document.getElementById("font"); 
 
    if(!(x.value>0)) 
 
    { 
 
    alert("Enter valid input"); 
 
    
 
    } 
 
    else 
 
    { 
 
    document.getElementsByTagName("body")[0].style.fontSize=x.value +"px" ; 
 
    } 
 
    
 
    
 
}

<input id="font" placeholder="Enter Font size" type="number" /> 
 
    <input type="button" value="Set" onclick="setFont()"/> 
 
    
 
    
 
    <p>Example paragraph</p>

Answer 3

var a = document.getElementById('text'); 
 
var inp = document.getElementById('font-size'); 
 
var btn = document.getElementById('btn') 
 
btn.addEventListener('click',function(){ 
 
x = window.getComputedStyle(a, null).getPropertyValue('font-size'); 
 
currentsize = parseFloat(x) 
 
a.style.fontSize = (inp.value) + 'px'; 
 
})

<p id='text'>text content <p> 
 
<input id="font-size" type="text" value=""> 
 
<button id='btn'>set</button>