个人中心
gpt4 book ai didi

javascript - 使用 JavaScript 调整文本大小

转载 作者：可可西里 更新时间：2023-11-01 14:43:34 26 4
gpt4 key购买 nike

我的 HTML 代码中的两个按钮在我单击任一按钮时增加或减少文本时遇到问题。我有我认为正确的 javascript 代码 我只是按钮工作有问题。对此问题的任何帮助表示赞赏。

HTML

<!DOCTYPE html>
<html>

   <head>
      <meta charset="UTF-8" />
      <title>Twin Life Magazine</title>
      <script src="modernizr-1.5.js"></script>
      <script src="fontsizer.js"></script>
      <link href="tlm.css" rel="stylesheet" type="text/css" />


   </head>

   <body onload="startup()">

  <section id="main">
     <header>
        <img src="twinlife.png" alt="The Chamberlain Civic Center" />
        <div>Search
           <input type="search" name="sbox" id="sbox" />
        </div>
     </header>

     <nav class="horizontal">
        <ul>
           <li><a href="#">News</a></li>
           <li><a href="#">Features</a></li>
           <li><a href="#">Articles</a></li>
           <li><a href="#">Twins Store</a></li>
           <li><a href="#">Current Issue</a></li>
           <li><a href="#">Archive</a></li>
           <li><a href="#">Submissions</a></li>
           <li><a href="#">Contact Us</a></li>
        </ul>
     </nav>

     <nav class="vertical">
        <h1>Current Issue</h1>
        <ul>
           <h2>Notes</h2>
           <li class="newgroup"><a href="#">From the Editor's Desk</a></li>
           <li><a href="#">Twin Life Staff</a></li>
           <li><a href="#">Event Calendar</a></li>
           <li><a href="#">Mailbag</a></li>
           <h2>Articles</h2>
           <li class="newgroup"><a href="#">Multiple Births on the Rise</a></li>
           <li><a href="#">Chicago Convention: A Great Event</a></li>
           <li><a href="#">Twins in Adolescence</a></li>
           <li><a href="#">Twins and Talking</a></li>
           <li><a href="#">Switching Roles</a></li>
           <h2>Features</h2>
           <li class="newgroup"><a href="#">Twin Tips</a></li>
           <li><a href="#">Photos of the Month</a></li>
           <li><a href="#">Recipe Corner</a></li>
           <li><a href="#">Consumer Report</a></li>
           <li><a href="#">Swap Meet</a></li>
           <li class="newgroup"><a href="#">Reader Survey</a></li>
        </ul>
     </nav>

     <article>
        <hgroup>
           <div id="fontbuttons">
              <input type="image" id="fontdown" alt="-" src="fontdown.png" button value="-0.1" />
              <input type="image" id="fontup" alt="+" src="fontup.png" button value="0.1" />
              window.onload=function(){startup();};
           </div>

           <h1>Twins and Talking</h1>
           <h2>by Peter Kuhlman, M.D., Ph.D.</h2>

        </hgroup>
        <figure>
           <img src="kuhlman.png" alt="" />
        </figure>

        <p>Communication occurs long before speech. Babies communicate 
           with their parents through crying, laughter, smiling and 
           pointing. The attentive parent quickly becomes attuned to 
           this "non-speech" communication. Usually in the second year of 
           life, babies will begin to add single words to these acts 
           of expression. A baby will point to a cup and say, "drink."
           The names "Mama" and "Dada" are among the first out of a
           baby's mouth.
        </p>
        <p>As the child gets older, he or she will add new words to 
           these expressions and will begin to use words in 
           combination: "get drink me." The parents provide visual
           and audio feedback to the child, encouraging the development 
           of speech. Through a process called echoing, parents 
           will naturally repeat what their child says, providing an 
           important confirmation that what the child has said has 
           been heard and understood.
        </p>
        <p>With twins, the situation may be slightly different. 
           Often parents cannot provide the one-to-one feedback that 
           single children routinely enjoy. It may be that the one 
           providing most of the feedback is the other twin!
        </p>
        <p>While the other twin is usually a very attentive and 
           eager audience, he or she cannot provide the type of 
           feedback needed for language development. Twins
           cannot correct each other's mistakes in the use of words 
           or grammar. Moreover, by communicating with each other, 
           twins are necessarily decreasing the amount of communication 
           with adults and older children. In some cases, twins become 
           such good audiences for each other, they lose interest
           in communicating with their parents!
        </p>
        <p>In rare cases, this one-to-one communication can progress 
           to the point at which a shared language is created. 
           The twins will come up with their own words, and in some 
           cases, their own grammatical structures. The languages
           are unintelligible to anyone else but the twins. These cases 
           are very rare, even though they are well publicized. 
           The twin's secret language will usually disappear by age 
           4 or 5, as they become more adept at using their
           parent's language.
        </p>
        <p>What can you do to help your twins in acquiring 
           language? The most important thing you can do is pay 
           individual attention to each child. Easier said than
           done! Provide feedback to each child as he or she gropes 
           with language. If you are feeding your twins, talk to one 
           child as the other is eating. Then, when the first child 
           is eating, switch to the second. When changing
           diapers, use the one-on-one time (one hopes) to further 
           provide the audio clues needed for learning language.
        </p>
        <p>As with everything that is twin-related, language 
           acquisition requires some extra work on the part of the 
           parents; but again with twin-related activities,
           the extra work is paid off in extra fun.
        </p>
     </article>


     <footer>
        Twin Life Magazine: Issue 189; &copy; 2015 (US)
        <span>
           <a href="#">About</a>
           <a href="#">Terms</a>
           <a href="#">Help</a>
        </span>
     </footer>

  </section>

  </body>

  </html>

JavaScript

function startup() {
   var fontButtons = document.getElementsByClassName("fontsizer");
   var i;
   alert(fontButtons.length);
   for (i = 0; i < fontButtons.length; i++) {
      fontbuttons[i].onclick = function(){resizeText(this);};
   }

   function resizeText(ObjectButton) {
      var fontChange;
      fontChange = parseFloat(objectButton.value);

      if (document.body.style.fontSize == "") {
      document.body.fontSize = "1.0em";
    }

  var currentFontSize;
  alert("changed");
  currentFontSize = parseFloat(document.body.style.fontSize);
  currentFontSize = currentFontSize + fontChange;
  document.body.style.fontSize = "currentFontSize+em"
   }
}

最佳答案

首先给按钮添加fontsizer类名:

<input class="fontsizer" type="image" id="fontdown" alt="-" src="fontdown.png" button value="-0.1" />
<input class="fontsizer" type="image" id="fontup" alt="+" src="fontup.png" button value="0.1" />

然后:

function startup()
{
    var fontButtons = document.getElementsByClassName ("fontsizer");
    alert (fontButtons.length);
    for (i = 0; i < fontButtons.length; i++)
    {
        fontButtons[i].onclick = function()
        {
            resizeText(this);
        };
    }

    function resizeText (objectButton)
    {
        var fontChange = parseFloat (objectButton.value);

        if (document.body.style.fontSize == "")
        {
            document.body.style.fontSize = "1.0em";
        }

        var size = document.body.style.fontSize;
        var currentFontSize = parseFloat(size);
        currentFontSize += fontChange;
        document.body.style.fontSize = currentFontSize + "em"
    }
}

注意变量名是区分大小写的，所以ObjectButton和objectButton是不一样的，也不要把变量放在字符串里面，它们的值不会被使用，还有无需先声明变量再初始化它们，您可以同时进行。

JSFiddle

关于javascript - 使用 JavaScript 调整文本大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33598311/

26 4 0
文章推荐： hadoop - Parquet 上的 Spark 与 Hive 上的 Spark(Parquet 格式)
文章推荐： windows - cpan 与 -MCPAN - Perl
文章推荐： wpf - React Native Windows 安装 - 找不到 react-native-windows@0.41.*
文章推荐： apache-spark - 每天自动更新一个 Hive View
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com