HTML上的字体大小

Question

我正在构建一个Web应用程序，以静态HTML页面的形式显示一本现实生活中的书的内容。

是否有可能添加一项​​功能，以允许用户从应用程序更改字体大小（而不是在CSS中更改字体大小）。

谢谢！

Answer 1

您要做的就是绑定style属性的值，以便能够动态控制它。

这是JSFiddle

上的有效示例

HTML

<h2>Change text-size</h2>
<div>
  <input id="range" type="range">
</div>
<div id="div">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dicta id impedit laudantium accusantium hic quisquam asperiores cumque dolores explicabo commodi amet suscipit dolorum, debitis provident vitae excepturi officia, illum, perferendis? Expedita repellendus atque consequuntur dolorum. Provident ipsam consequuntur nisi quas excepturi earum vero, dolores ut ab maiores quod accusamus? Dicta labore eos vel non, accusamus, facere molestiae dolores doloremque at aspernatur id, temporibus quidem natus eveniet! Ex repellat libero tempore, sit nisi explicabo, illum animi unde officia totam quibusdam nesciunt possimus rerum cumque incidunt corporis facere dolore harum ipsam aperiam amet quidem adipisci vero cum! Nostrum, sit tempore dignissimos!
</div>

JavaScript

const div = document.getElementById('div');
const rangeInput = document.getElementById('range');

rangeInput.oninput = e => {
    div.style.fontSize = e.target.value + 'px'
}