如何增加整個標簽的字體大小

Question

我遇到了一個任務問題。 部分任務是使用 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>

Answer 1

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

除此之外，正如評論中指出的那樣，您只是獲取所有p元素，並嘗試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/

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

Answer 2

考慮以下。

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

Answer 3

我認為您必須調整您的fontUp和fontDn功能。 獲取帶有p標簽的元素是正確的，但是實現這一點的方法之一是循環所有這些元素，然后獲取它們當前的每個font-size ，並在fontUp其遞增 1 並在 on fontUp其遞減 1 fontDown

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