`
manabone
  • 浏览: 32232 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

javascript 改变字体大小方法集合

    博客分类：
  • js
JavaScript 
阅读更多
javascript 改变字体大小方法集合

第一种方法： 分为 大 中 小 控制正文字体大小，一般需要指定 id 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- 
transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<htmL> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
</head> 
<style> 
#content {font-size:12px; 
line-height:200%; 
padding:10px; 
} 
</style> 
<script language="javascript"> 
function setfont(size) 
{ 
var obj; 
obj=document.getElementById("content"); 
obj.style.fontSize=size; 
//obj.style.color="#ff0000"; 
} 
</script> 
<body> 
<div>字体: <a href="#" onclick="javascript:setfont('12px')">小</a><a href="#" onclick="javascript:setfont 
('18px');">中</a><a href="#" onclick="javascript:setfont('24px');">大</a></div> 
<div id="content"> 
hello world 
</div> 
</body> 
</htmL>


第二种方法，用的不多，有特殊需要的可以用。这个是设置body中所有的大小设置，不如上面的代码就控制正文的字体大小。大家可以根据自己的需要选用。注意多测试。 

<script> 
var tgs = new Array( 'div','td','tr'); 
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' ); 
var startSz = 2; 
function ts( trgt,inc ) { 
if (!document.getElementById) return 
var d = document,cEl = null,sz = startSz,i,j,cTags; 
sz += inc; 
if ( sz < 0 ) sz = 0; 
if ( sz > 6 ) sz = 6; 
startSz = sz; 
if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ]; 
cEl.style.fontSize = szs[ sz ]; 
for ( i = 0 ; i < tgs.length ; i++ ) { 
cTags = cEl.getElementsByTagName( tgs[ i ] ); 
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ]; 
} 
} 
</script> 
<style> 
.tabfont{font-size:12px} 
</style> 
<body> 
<a href="javascript:ts('body',1)">+ 放大字体</a> | <a 
href="javascript:ts('body',-1)">+ 减小字体</a>
hello world
</body>


第三种方法： 只有增加 减小 两种方法，不过很实用 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<htmL> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
</head> 
<style> 
#content {font-size:12px; 
line-height:200%; 
padding:10px; 
} 
</style> 
<script language="javascript"> 
//更改字体大小 
var status0=''; 
var curfontsize=10; 
var curlineheight=18; 
function turnsmall(){ 
if(curfontsize>10){ 
document.getElementById('art_content').style.fontSize=(--curfontsize)+'pt'; 
    document.getElementById('art_content').style.lineHeight=(--curlineheight)+'pt'; 
} 
} 
function turnbig(){ 
if(curfontsize<28){ 
document.getElementById('art_content').style.fontSize=(++curfontsize)+'pt'; 
    document.getElementById('art_content').style.lineHeight=(++curlineheight)+'pt'; 
} 
} 
</script> 
<body> 
字体：[<a href="javascript:turnbig()">增加</a> <a href="javascript:turnsmall()">减小</a>]
 
<div id="art_content"> 
文本
</div> 
</body> 
</htmL>
分享到：
| 设计模式分类
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    在JavaScript中，改变字体大小的方法多种多样，但主要依赖于CSS样式来实现。本文将介绍三种常见的JavaScript方法来调整网页中的字体大小，适用于不同的场景需求。 ### 第一种方法：通过CSS类切换 这种方法通常用于...

    javascript 改变字体大小方法集合 <font color=red>原创</font>

    在JavaScript中，改变字体大小的方法主要有几种，这些方法主要用于网页上的文本内容，使得用户可以根据自己的需求调整页面上文字的可读性。以下是针对标题和描述中提到的三种方法的详细解释： 1. 第一种方法： 这种...

    javascript属性方法集合,自己认为重要的都有

    8. `fontsize(size)`：设置字体大小，通过`&lt;font size=size&gt;&lt;/font&gt;`标记。 9. `indexOf(pattern)`：返回第一次出现`pattern`的位置，不存在则返回-1。 10. `indexOf(pattern, startIndex)`：从指定的`startIndex`...

    js简单实现调整网页字体大小的方法

    总结一下，本文提供的JavaScript实现调整网页字体大小的方法主要涉及以下知识点： 1. 使用JavaScript操作DOM元素的属性，特别是`style.fontSize`。 2. 遍历和操作HTML元素集合，如`getElementsByTagName`方法。 3. ...

    Javascript技巧大集合时间.docx

    4. **平面按钮和输入框**：通过设置边框样式、宽度、高度、字体大小和颜色等CSS属性，可以创建具有特定外观的按钮和输入框。 5. **颜色变化**：通过在`style`属性中定义颜色变量，可以实现按钮或输入框颜色的动态...

    javascriptAPI

    CSS可以控制页面布局，包括字体、颜色、大小、位置等。JavaScript可以与CSS结合，通过操作CSSOM（CSS Object Model）来改变元素的样式，实现动态效果。 在提供的文件列表中： 1. "JavaScript高级程序设计（中文...

    javascript 经典实例大全一

    它们通常涉及CSS3与JavaScript的结合使用，通过改变元素的位置、大小、透明度等属性来创造出动态视觉体验。 "广告大全"部分可能包含了各种JavaScript实现的广告插件和代码片段，如弹窗广告、横幅广告、悬浮广告等。...

    js改变文章字体大小的实例代码

    在这个例子中，我们寻找ID为`news_content`的`&lt;div&gt;`元素，这通常是我们要更改字体大小的文章内容容器。 ```javascript if (!divBody) { return; } divBody.style.fontSize = size + "px"; ``` 如果找到`news_...

    336完美像素通用矢量Web字体工具图标

    开发者可以通过JavaScript动态改变元素的类名，实现图标在交互中的变化，或者利用JavaScript库如Font Awesome Icons的JS插件，实现更复杂的功能，如旋转、动画等。 总的来说，"336完美像素通用矢量Web字体工具图标...

    caidan.rar_javascript

    例如，当鼠标悬停在菜单项上时，可以使用JavaScript动态地改变其背景色或字体大小，实现弹性效果。 在压缩包中的"发一个弹性菜单，垂直的那种.htm"文件很可能是示例代码，它可能包含HTML结构、内联CSS和JavaScript...

    枚举系统字体名称，显示网页图片

    枚举系统字体名称是获取这些资源的一种方法，这对于开发需要展示不同字体效果的应用程序或者进行字体管理时非常有用。同时，显示网页图片是网页开发中的基本操作，它涉及到浏览器渲染、图像格式和网络传输等多个方面...

    html&js，JavaScript参考手册，css

    通过选择器，开发者可以指定HTML元素的样式，如颜色、字体、大小、位置等。CSS3引入了许多新特性，如选择器层次更深、动画、过渡效果、多列布局以及媒体查询，使开发者能够创建出响应式和视觉上吸引人的设计。 ...

    字体图标.rar

    在前端开发领域，字体图标（Font Icons）是一种广泛使用的图形表示方法，它们将图标设计成字体文件，使得开发者可以像处理文字一样处理图标。"字体图标.rar"这个压缩包文件显然是针对前端开发者的一个资源集合，其中...

    JavaScript技巧收集(200多个)

    4. **创建平面按钮和输入框**：通过调整边框、高度、宽度、字体大小和颜色等属性，可以创建具有特定样式的按钮和输入框。 5. **按钮颜色变化**：利用JavaScript的`style`属性，可以在用户交互时动态改变元素颜色，...

    javascript通讯录

    3. **状态栏特效**：状态栏通常指的是浏览器底部的状态显示区域，这部分代码可能会利用JavaScript改变其显示内容或实现动态效果，以增加用户体验。 4. **页面效果类**：这包括各种页面级别的动画和转换效果，如淡入...

    DHTML、CSS、JavaScript网页开发手册

    一些常用的CSS属性包括`color`定义文本颜色，`font-size`设定字体大小，`background-color`设置背景色，`margin`和`padding`调整元素的边距和内填充，以及`display`属性控制元素的显示方式（如块级元素、行内元素或 ...

    div+css有实例,易学易懂

    - **字体的大小**：使用`font-size`属性。 - **字体的加粗**：通过`font-weight`属性。 - **字体的样式**：使用`font-style`属性。 - **字体的变形**：通过`font-variant`属性。 - **字体属性的简写**：`font`属性...

    JAVASCRIPT精彩200例

    例如，通过`style`属性可以设置背景颜色、边框、字体大小等。JavaScript可以动态修改这些样式，实现更加复杂的交互效果。 ```html 按钮" size=10 class=s02 style="background-color:rgb(235,207,22)"&gt; ``` 这里，...

    JavaScript和CSS帮助文档

    4. 基于原型的对象：所有对象都继承自一个原型对象，可以通过修改原型来添加或改变属性和方法。 5. 事件驱动：通过监听用户操作或其他事件触发执行特定代码。 6. 浏览器支持：JavaScript 在浏览器环境中运行，不同...

Magicbox
Global site tag (gtag.js) - Google Analytics