Bagaimana untuk menukar saiz fon artikel dalam kemahiran js

Bagaimana untuk menukar saiz fon artikel dalam kemahiran js_javascript

WBOY

Lepaskan： 2016-05-16 15:21:05

asal

1460 orang telah melayarinya

Baru-baru ini saya mendapati ramai rakan bertanya: Bagaimana untuk menukar saiz fon artikel menggunakan js?

Editor telah menyemak artikel yang berkaitan dan menyusun beberapa kes kecil untuk rujukan anda. Kandungan khusus adalah seperti berikut

Rendering:

Klik butang besar dan kecil untuk menukar saiz fon pada bila-bila masa

Kod khusus:

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

Salin selepas log masuk

Izinkan saya berkongsi satu lagi buah berangan dengan anda:

Prinsip kerja adalah sangat mudah Ia adalah untuk menukar saiz fon artikel apabila peristiwa dicetuskan untuk menjadi lebih mudah, ia adalah untuk menukar nilai atribut saiz fon (jQuery versi 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>

Salin selepas log masuk

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

Salin selepas log masuk

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

  })
});

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.