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