suchen

Heim >Web-Frontend >js-Tutorial >So ändern Sie die Schriftgröße von Artikeln in js_javascript skills

So ändern Sie die Schriftgröße von Artikeln in js_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:21:051516Durchsuche

Kürzlich habe ich festgestellt, dass viele Freunde gefragt haben: Wie ändere ich die Schriftgröße eines Artikels mit js?

Der Herausgeber hat relevante Artikel überprüft und mehrere kleine Fälle als Referenz zusammengestellt. Die spezifischen Inhalte sind wie folgt

Rendering:

Klicken Sie jederzeit auf die große und kleine Schaltfläche, um die Schriftgröße zu ändern

Spezifischer Code: 

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

Lass mich noch eine Kastanie mit dir teilen:

Das Funktionsprinzip besteht darin, die Schriftgröße des Artikels zu ändern, wenn das Ereignis ausgelöst wird. Um es einfacher zu machen, ist es, den Wert des Attributs „font-size“ zu ändern (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>

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

  })
});

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der Javascript-Kenntnisse zur Definition regulärer Ausdrücke (Grammatik)_JavascriptNächster Artikel：Zusammenfassung der Javascript-Kenntnisse zur Definition regulärer Ausdrücke (Grammatik)_Javascript

In Verbindung stehende Artikel

Mehr sehen