0

当您单击右侧不同大小的字母时，我希望能够更改字体大小。如何使用 javascript 命令站点执行此操作？这是我到目前为止的代码：

  <!DOCTYPE html>
<html>
<head>
<body>

<div> 
 <font size="2"><a href="javascript:void(0);" onclick="changemysize(16);">A</a></font>
 <font size="4"><a href="javascript:void(0);" onclick="changemysize(20);">A</a></font>
 <font size="5"><a href="javascript:void(0);" onclick="changemysize(25);">A</a></font>

</div>

<div id="callout" class="medium">
    <ul id="controls">
        <li id="small">A</li>
        <li id="medium">A</li>
        <li id="large">A</li>
    </ul>
    <div id="mymain">
         <h1>Header</h1>

         <h2>Subheader</h2>

        <p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.</p>
    </div>
</div>
<p style="margin-top: 100px; text-align: center; font-size: 75%;"><a href="../resize.zip">Download the files (resize.zip)</a>

</p>

<script src="resize.js"></script> 

</body>
</head>
</html>

Javascript：

function changemysize(myvalue) {
    var div = document.getElementById("mymain");
    div.style.fontSize = myvalue + "px";
}
4

2 回答 2

0

脚步：

  • 在您的 css 文件中定义一个类以放大字体大小。
  • 在你的 li 的 onclick 上调用一个函数
  • 让函数为您的 html 正文添加/删除相应的类document.body.classList.add('nameOfTheClassWithFontSize');

参考：更改整个页面内容的文本字体大小

于 2013-10-31T21:26:32.673 回答
0

对于使用 jQuery 的 HTML： $('body').css('font-size', '12px');

你可以通过你想要的大小来增加/减少等等。

于 2013-10-31T21:29:28.083 回答