您好,欢迎光临郑州做网站网!
全国咨询热线:18539972853
首页/常见问题/文章详情

网站制作中如何在文章最终页加入文字大小控制功能

发表时间:2019-09-19 12:10:37    浏览次数:267    来源:做网站

在网站制作中内容基本就是文字和图片,为了美观在网页制作的过程中会加入CSS样式控制文本的显示,定义文字显示的的大小、颜色和形式。在文章的最终页往往是图片和文字比较集中的页面,预先做CSS样式控制能够规范网页显示风格。但是不是所有的样式风格都能满足每一个浏览你网页的顾客,为了提升网站的用户体验度和交互特点,可以考虑在网页加入文字大小控制的功能,比如老年人访问你网站的时候,他可以通过对文字大小的控制来放大原来文字,以更方便的阅读文章。那么这样的功能好实现吗,其它是比较简单的,用一个事件+一行JS脚本就可以轻松实现。

网页加入文字大小控制功能

第一步:加入控制脚本,可以是网页的任意位置,不过最好在<body></body>之间。

<script language="javascript">function T(n){document.getElementById("ArticleCnt").style.fontSize=n+"px";}</script>


第二步:标注需要控制内容显示部分的ID,如:ArticleCnt

<div id="ArticleCnt">郑州网站制作网:https://www.up7.com.cn(组图)</div>

注意:此处的ID与第一步JS脚本中的ID要保持一致,不然会出错没有效果。

第三步:在页面的合适位置加入文字大小选择的样式

【<a href="javascript:T(20);" class="lblack">大</a>&#160;<a href="javascript:T(16);" class="lblack">中</a>&#160;<a href="javascript:T(12);" class="lblack">小</a>】

说明:这里列出了三个选项,以大号为例,定义的“大”,把数值20通过脚本传递给自定义函数 T(n),然后脚本使用DOM操作把ID为“AritcleCnt”的内容里的文字大小改变成:20px;


功能示例:点击查看效果


本文地址:https://www.up7.com.cn/news/239.html