js实现动态改变字体大小代码

在很多大网站上为了提高用户方便阅读文字，都提供有字体大小选择功能，以适应不同年龄段人群的阅读需求，其实这种功能实现起来也很简单，修改起来也方便，字体大号由你来定，默认字体大小可以CSS页面中定义，一般网页的标准字体是9pt，也就是12px；

实例代码一：

<!DOCTYPE html>
<html>
<head>
<title>修改字体大小.html</title> 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
div{
border:1px red solid;
width:455px;
font-size:16px;
}
.max{
font-size:20px;
}
.moren{
font-size:16px;
}
.min{
font-size:12px;
}
</style>
<script type="text/javascript">
//此种方式降低了js和CSS的耦合性
function changeFontSize(fontStyle){
// 获取节点对象
var divNode = document.getElementsByTagName("div")[0];
// 设置该节点的Name属性以及属性值
divNode.className=fontSize;
}
/*
function changeFontSize2(fontSize){
// 获取节点对象
var divNode = document.getElementsByTagName("div")[0];
divNode.style.fontSize=fontSize;
}
*/
</script>
</head> 

<body>
<a href="javascript:void(0)" onclick="changeFontSize2('20px')" class="max">大号</a>
<a href="javascript:void(0)" onclick="changeFontSize2('16px')" class="moren">中号</a>
<a href="javascript:void(0)" onclick="changeFontSize2('12px')" class="min">小号</a>
<div>
这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>
这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>
这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>
这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>
这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>
这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>
这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>
这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>
这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>
这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>
这里呢就是显示的文字，通过点击上面的超链接改变此字体大小<br/>
</div>
</body>
</html>

实例方法二：

<html>
<head>
<title>JavaScript设置网页字体</title>
<style>
body{
font-size:9pt;
}
</style>
</head>
<body>
<div id=zoom>这是一段示例文字，你可以点击下边选择不同字号的字体，这段文字会随即改变大小。我们。</div>
<SCRIPT language=JavaScript>
function doZoom(size){
document.getElementById('zoom').style.fontSize=size+'pt'
}
</SCRIPT>
<P align=right>选择字号：[ <A
 href="javascript:doZoom(13)">13pt（超大）</A> <A
 href="javascript:doZoom(10.5)">10.5pt（中型）</A> <A
 href="javascript:doZoom(9)">9pt（标准）</A> ]
</body>
</html>
赞 (0)

相关推荐

  • jQuery之字体大小的设置方法

    先获取字体大小,进行处理. 再将修改的值保存. slice() 方法可从已有的数组中返回选定的元素.arrayObject.slice(start,end).start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推. end   可选.规定从何处结束选取.该参数是数组片断结束处的数组下标.如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素.如果这个参数是负数,那么它规定的是从数组

  • JavaScript 控制字体大小设置的方法

    在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来: function setFontSize (id,content,params){ var oTarget = document.getElementById(id), content = document.getElementById(content), size = params.size || 14, maxSize = params.maxSize || 20, step =

  • 通过JavaScript控制字体大小的代码

    为了此代码到您的网页必须使用像素大小的字体(PX),而不是相对大小的字体,使用"EM"或"%".当然如果你使用其他字体单位的代码可以很容易地适应这些.如果脚本不能找到一个段落的字体大小,它会默认为12px.核心代码: 复制代码 代码如下: var min=8;var max=18;function increaseFontSize() {   var p = document.getElementsByTagName('p');   for(i=0;i<p.l

  • js实现动态改变字体大小代码

    在很多大网站上为了提高用户方便阅读文字,都提供有字体大小选择功能,以适应不同年龄段人群的阅读需求,其实这种功能实现起来也很简单,修改起来也方便,字体大号由你来定,默认字体大小可以CSS页面中定义,一般网页的标准字体是9pt,也就是12px: 实例代码一: <!DOCTYPE html> <html> <head> <title>修改字体大小.html</title> <meta http-equiv="keywords"

  • jquery更换文章内容与改变字体大小代码

    复制代码 代码如下: <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="javascript教程" src="到jquery官网下载jquery文件.js"></script>

  • jQuery动态修改字体大小的方法【测试可用】

    jQuery动态修改字体大小的方法【测试可用】

    本文实例讲述了jQuery动态修改字体大小的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> * { margin:0; padding:0; } .msg

  • 浅扒Android动态设置字体大小的示例

    说点废话 Android开发中,TextView类的控件应该说是很常用了.一般来说我们是通过android:textSize="20sp" 来设置字体大小,但是很多时候也需要动态设置字体大小,调用也很简单: textView.setTextSize(textSize); 为了适配各种各样的型号,我们一般会将字体大小定义到dimens.xml之中: <dimen name="text_size">16sp</dimen> 然后在java代码中设

  • js实现动态改变radio状态的方法

    h5的radio是自带选中状态改变的,但是如果自带的状态无法满足自己的需求时,就需要自己去实现. 代码如下: h5部分代码 <p class="group"> <label class="active"> <input type="radio" name="parent_radio" value="1" id="new_data" onclick="

  • javascript实现动态改变层大小的方法

    本文实例讲述了javascript实现动态改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态设置层的大小</title>

  • javascript 改变字体大小方法集合 原创

    第一种方法: 分为 大 中 小 控制正文字体大小,一般需要指定 id #content {font-size:12px; line-height:200%; padding:10px; } function setfont(size) { var obj; obj=document.getElementById("content"); obj.style.fontSize=size; //obj.style.color="#ff0000"; } 字体: 小中大 我们

  • JS+CSS实现闪烁字体效果代码

    本文实例讲述了JS+CSS实现闪烁字体效果的方法.分享给大家供大家参考,具体如下: <div id="blink">闪烁的文字</div> <script language="javascript"> function changeColor(){ var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; color=color.spli

  • js DNA动态序列比对代码

    动态序列比对 function pairaln(seq1, seq2){ // scoring scheme var MATCH = 1; // +1 for letters that match var MISMATCH = -1; // -1 for letters that mismatch var GAP = -1; // -1 for any gap // initialization var score=[[]]; var pointer=[[]]; score[0][0] = 0;

  • JavaScript 动态改变图片大小

    最近由于项目需要,在实现图片的时候,若图片大于100 X 100,则将其缩小为 100 X 100,若比这个小,则保持原图大小.经过研究发现,可以用Javascript代码简单实现. Javascript代码: 复制代码 代码如下: <script> function resizeImage(obj){if(obj.height>100)obj.height=100;if(obj.width>100)obj.width=100; } </script> 页面代码: 复制

随机推荐