繁体   English   中英

使用Javascript调整字母大小

[英]Resizing Letters Using Javascript

当您单击右侧的不同大小的字母时,我希望能够更改字体大小。 我该如何命令网站使用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";
}

脚步:

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

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

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

您可以传递想要增加/减少的大小,依此类推。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM