Question

我要求根据用户输入的条目更改应用程序中的字体大小？我知道CSS变量并在所有类中使用它，但这对浏览器的支持有限。

例如，用户更喜欢14px，然后所有控件和文本字体大小都应更改为14px。

您能否告诉我如何实现这一目标？

Answer 1

在REM中使用font-size。 1 Rem使用了html的基本字体大小。看到这段代码

＆＃13;

var html = document.getElementsByTagName('html')[0];

var input = document.getElementById('font-size');

input.addEventListener('input', function(e) {
	html.style.fontSize = ""+e.target.value+"px";
  console.log(html.style.fontSize)
})

＆＃13;

html {
  font-size: 16px;
}

p {
  font-size: 2rem;
}

＆＃13;

<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="">

＆＃13;

Answer 2

如果您动态地将font-size赋予body，则可以实现此

＆＃13;

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" ;
  }
  
  
}

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

根据用户首选项，在应用程序中动态更改CSS字体大小

3 个答案: