Comment changer la taille de la police des articles dans les compétences js

Comment changer la taille de la police des articles dans les compétences js_javascript

WBOY

Libérer： 2016-05-16 15:21:05

original

1507 Les gens l'ont consulté

Récemment, j'ai découvert que de nombreux amis demandaient : Comment changer la taille de la police d'un article en utilisant js ?

L'éditeur a examiné les articles pertinents et compilé plusieurs petits cas pour votre référence. Le contenu spécifique est le suivant

Rendu :

Cliquez sur les gros et petits boutons pour changer la taille de la police à tout moment

Code spécifique :

<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> <a href="javascript:changesize('12')">小</a>
</body>
</html>

Copier après la connexion

Laissez-moi partager une autre châtaigne avec vous :

Le principe de fonctionnement est très simple. Il s'agit de changer la taille de la police de l'article lorsque l'événement est déclenché. Pour être plus simple, il s'agit de changer la valeur de l'attribut font-size (jQuery version 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>

Copier après la connexion

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;}

Copier après la connexion

$(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();
    }

  })
});

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.