当前位置: 首页 > 编程笔记 >

js如何改变文章的字体大小

陶烨赫
2023-03-14
本文向大家介绍js如何改变文章的字体大小,包括了js如何改变文章的字体大小的使用技巧和注意事项,需要的朋友参考一下

最近发现有许多朋友提问:使用js如何改变一篇文章的字体的大小?

小编查阅了相关文章,为大家整理了几个小案例,供大家参考,具体内容如下

效果图:

点击大、小按钮,随时切换字体大小

具体代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用js如果改变一篇文章字体的大小</title>
</head>
 <style type="text/css">
   a{ text-decoration:none; color:#0C3}
  a:hover{ color:#F36}
  
 </style>
<body>
<script>
function changesize(size) 
{ 
document.getElementById("article_content").style.fontSize =size+"px"; 
} 
</script>
<div id="article_content">小牛知识库<br/>小牛知识库欢迎您<p>好好学习 天天向上</div>
<a href="javascript:changesize('20')">大</a>&nbsp;<a href="javascript:changesize('12')">小</a>
</body>
</html>

再为大家分享一栗子:

这个工作原理很简单,就是在触发事件的时候将文章的字号改变,更直白一些就是改变font-size这个属性的值(jQuery版本1.7.2)
HTML

<div class="box">
  <div class="ctrl">
    <a href="javascript:;">放大</a>
    <a href="javascript:;">缩小</a>
    <a href="javascript:;">默认</a>
  </div>
  <div class="cont">这里是一些文字</div>
</div>

CSS

.box{text-align:center;}
.ctrl{padding:50px 0px 0px 0px;background:#f4f4f4;font-size:0px;border-bottom:3px solid #333;}
.ctrl a{display:inline-block;width:50px;height:30px;line-height:30px;background:#333;color:#fff;font-size:14px;}
.ctrl a:hover{background:#444;color:#fff;font-weight:700;text-decoration:none;}
.cont{padding-top:50px;font-size:14px;}

JS

$(function(){
  function sizeIn(){
    var sizeCont = parseInt($(".cont").css("fontSize")); // 获取原设定的font-size的值
    if(sizeCont == 30){ // 判断font-size增大到30像素时停止
      $(".cont").css({fontSize:sizeCont});
    }else{
      $(".cont").css({fontSize:sizeCont + 1});
    }
  }
  function sizeOut(){
    var sizeCont = parseInt($(".cont").css("fontSize"));
    if(sizeCont == 10){ // 判断font-size减小到10像素时停止
      $(".cont").css({fontSize:sizeCont});
    }else{
      $(".cont").css({fontSize:sizeCont - 1});
    }
  }
  function sizeDefault(){
    $(".cont").css({fontSize:""})
  }
  $(".ctrl a").click(function(){
    if($(this).index() == 0){
      sizeIn();
    }else if($(this).index() == 1){
      sizeOut();
    }else{
      sizeDefault();
    }

  })
});

希望本文所述对大家学习javascript程序设计有所帮助。

 类似资料:
  • 引用MultiLanguage.nsi的内容: ;NSIS Modern User Interface ;Multilingual Example Script ;Written by Joost Verburg ;-------------------------------- ;Include Modern UI !include "MUI.nsh" ;-------------------

  • 问题内容: 您可以更改JOptionPane的字体和文本大小吗?我尝试了它,只有当我在那个特定的Java类上“运行文件”时,它才起作用。如果启动整个项目,则不会更改字体。我只想更改一个特定的JOptionPane而不是全部。 这是代码: 问题答案: 真的很简单。JOption窗格不仅接受字符串,还接受组件。因此,您可以创建一个标签集并设置其字体并将其用作消息。 我不明白为什么以前没人回答这个问题

  • 我有一个java应用程序-一个计算器。我想通过调整应用程序窗口的大小来动态调整按钮的字体大小。如何实现? 我的想法是使用ComponentEvents。我有应用程序窗口的初始大小和初始字体的大小。我想根据按钮的大小改变字体大小,受窗口大小变化的影响。问题是如何在覆盖方法中使用比例[初始窗口大小]/[初始字体大小]?每个字体的比例都不同。

  • 问题内容: 如何更改matplotlib图上所有元素(刻度,标签,标题)的字体大小? 我知道如何更改刻度标签的大小,方法是: 但是如何改变其余的呢? 问题答案: 从matplotlib文档中, 这会将所有项目的字体设置为kwargs对象指定的字体。 另外,您也可以使用此答案中建议的方法: 要么 您可以在“定制matplotlib”页面上找到可用属性的完整列表。

  • 所以我开始了一个个人简历网站,我偶然发现了一个非常酷的东西:font awesome,它以文本的形式提供图形,允许你通过CSS添加字体效果。我的问题是一切都很好,直到我试图改变字体大小,无论什么原因,它就是不会改变。你有什么想法吗?我也是新的这里,我已经阅读通过如何使帖子,但如果我做错了,请让我知道。

  • 我的Strings.xml文件的屏幕截图