如何增加整个标签的字体大小

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>