如何增加整個標簽的字體大小-有解無憂

我遇到了一個任務問題。部分任務是使用 jQuery 或 JavaScript 增加段落的字體大小。

每次單擊滑鼠時，控制臺陳述句似乎都會增加 1（第一次單擊計為 1，第二次計為 2，以此類推）。

謝謝。

function fontUp() {
  var fSize = document.getElementsByTagName('p');
  $('#font-up').click(function() {
    console.log('font-up clicked');
    fSize  ;
  });
}

function fontDn() {
  var fSize = document.getElementsByTagName('p');
  $('#font-dn').click(function() {
    console.log('font-down clicked');
    fSize--;
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="content">
    <p id='p1'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
    <br>
    <p id='p2'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
  </div>

  <div id="selectors">
    <button id="button1" class="color-button" onclick="changeColorRed()">Red</button>
    <button id="button2" class="color-button" onclick="changeColorBlue()">Blue</button>
    <button id="button3" class="color-button" onclick="changeColorGreen()">Green</button>

    <br>
    <br>

    <input id="red-input" class="input-box" type="text" placeholder="red"></input>
    <input id="green-input" class="input-box" type="text" placeholder="green"></input>
    <input id="blue-input" class="input-box" type="text" placeholder="blue"></input>

    <button id="rgb-button" class="color-button" onclick="changeRGB()">Change Background</button>

    <br>
    <br>

    <button id="font-up" onclick="fontUp()">Font Up</button>
    <button id="font-dn" onclick="fontDn()">Font Down</button>
  </div>
</div>

uj5u.com熱心網友回復：

我認為你必須調整你的fontUp和fontDn功能。獲取帶有p標記的元素是正確的，但是實作這一點的方法之一是回圈所有這些元素，然后獲取它們的每個 current font-size，并將其遞增 1fontUp并遞減 1fontDown

由于p元素本身沒有在元素上宣告特定的字體大小樣式，而是在樣式表中，您可以使用它getComputedStyle來獲取font-size，這里有更多關于如何在 HTML 中獲取字體大小的參考

function fontUp(){
    var fSize = document.getElementsByTagName('p');
    $('#font-up').click(function(){
        for(let i = 0; i < fSize.length; i  ) {
          let currentSize = window.getComputedStyle(fSize[i], null).getPropertyValue('font-size');
          fSize[i].style.fontSize = `${Number(currentSize.replace('px',''))   1}px`
        }
    });
}

function fontDn(){
    var fSize = document.getElementsByTagName('p');
    $('#font-dn').click(function(){
        for(let i = 0; i < fSize.length; i  ) {
          let currentSize = window.getComputedStyle(fSize[i], null).getPropertyValue('font-size');
          fSize[i].style.fontSize = `${Number(currentSize.replace('px','')) - 1}px`
        }
    });
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"> 
    <div id="content">
        <p id='p1'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            Qui iste deserunt voluptate unde, pariatur aliquam consequatur, 
            aut neque accusamus consequuntur, odit velit exercitationem non 
            eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
            <br>
        <p id='p2'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
            Qui iste deserunt voluptate unde, pariatur aliquam consequatur, 
            aut neque accusamus consequuntur, odit velit exercitationem non 
            eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
    </div>

    <div id="selectors">
        <button id="button1" class="color-button" onclick="changeColorRed()">Red</button>
        <button id="button2" class="color-button" onclick="changeColorBlue()">Blue</button>
        <button id="button3" class="color-button" onclick="changeColorGreen()">Green</button>

        <br>
        <br>

        <input id="red-input" class="input-box" type="text" placeholder="red"></input>
        <input id="green-input" class="input-box" type="text" placeholder="green"></input>
        <input id="blue-input" class="input-box" type="text" placeholder="blue"></input>
        
        <button id="rgb-button" class="color-button" onclick="changeRGB()">Change Background</button>

        <br>
        <br>

        <button id="font-up" onclick="fontUp()">Font Up</button>
        <button id="font-dn" onclick="fontDn()">Font Down</button>
    </div>
</div>

uj5u.com熱心網友回復：

首先，輸入是自動關閉的，所以最后不需要</input>。

除此之外，正如評論中指出的那樣，您只是獲取所有p元素，并嘗試對元素陣列執行遞增或遞減運算子，這不會做任何事情。您希望以數字形式獲取當前字體大小（您可以replace(/[^0-9]/g, '')在字體大小上使用，也可以僅parseInt()洗掉px，然后遞增/遞減，然后將其分配回段落。

function fontUp(){
  //get the current font-size as an integer
  var fSize = parseInt($('p').css('font-size'));
  //use a pre-increment operator to add one to the font size and assign it to the paragraphs at the same time
  $('p').css('font-size',   fSize);
}

function fontDn(){
  var fSize = parseInt($('p').css('font-size'));
  $('p').css('font-size', --fSize);
}

https://jsfiddle.net/n2ydp458/

編輯：我回答的有點太快了，把你的事件偵聽器留在那里的事件偵聽器中。我現在已經洗掉了它們。

uj5u.com熱心網友回復：

考慮以下。

$(function() {
  var fonts = [
    "font-sm",
    "font-md",
    "font-rg",
    "font-lg",
    "font-xl"
  ];

  var fSize = 2;

  function findFont(i, c) {
    if (c.indexOf("font") === 0) {
      return c;
    }
  }

  function changeFont(dir) {
    if (dir == "up") {
      fSize  ;
    } else {
      fSize--;
    }
    if (fSize < 0) {
      fSize = 0;
    }
    if (fSize >= fonts.length - 1) {
      fSize = fonts.length - 1;
    }
    $("#content p").removeClass(findFont).addClass(fonts[fSize]);
  }

  function changeColor(cName) {
    $("#content p").removeClass("red blue green").addClass(cName);
  }

  $("button[id^='font']").click(function() {
    if ($(this).is("#font-up")) {
      changeFont("up");
    } else {
      changeFont("down");
    }
    console.log("Font Change", fonts[fSize]);
  });

  $(".color-button").click(function() {
    changeColor($(this).val());
    console.log("Color Changed", $(this).val());
  });
});

.font-1,
.font-sm {
  font-size: 11px;
}

.font-2,
.font-md {
  font-size: 12px;
}

.font-3,
.font-rg {
  font-size: 14px;
}

.font-4,
.font-lg {
  font-size: 18px;
}

.font-5,
.font-xl {
  font-size: 24px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

.green {
  color: green;
}

#selectors input {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="content">
    <p id='p1' class="font-rg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
    <p id='p2' class="font-rg">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui iste deserunt voluptate unde, pariatur aliquam consequatur, aut neque accusamus consequuntur, odit velit exercitationem non eligendi fuga repudiandae! Omnis, veritatis officiis.</p>
  </div>
  <div id="selectors">
    <button id="button1" class="color-button" value="red">Red</button>
    <button id="button2" class="color-button" value="blue">Blue</button>
    <button id="button3" class="color-button" value="green">Green</button>
    <input id="red-input" class="input-box" type="text" placeholder="red" />
    <input id="green-input" class="input-box" type="text" placeholder="green" />
    <input id="blue-input" class="input-box" type="text" placeholder="blue" />
    <button id="rgb-button" class="color-button" onclick="changeRGB()">Change Background</button>
    <button id="font-up">Font Up</button>
    <button id="font-dn">Font Down</button>
  </div>
</div>

這讓您可以通過 CSS 控制字體大小。它還確保用戶不能過多地減少或增加字體大小。您可以定義自己的類名或您想要的類名。您還可以根據需要定義尺寸。

查看更多：

https://api.jquery.com/removeClass/#removeClass-function

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/317180.html

標籤：javascript html 查询

上一篇：如何使4個變數始終從陣列中取不同的值？

下一篇：如何從javascript在<li>中插入<button>