如何使用jQuery更改多个元素的字体大小

pbpqsu0x 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(116)

我需要将元素的字体大小增加1。我已经这么做了，但是很远。

HTML

<div id="container">
<h3 class="heading">
  24px font
</p>
<p class="content">
  12px font
</p>
<span class="footNote">
  10px font
</span>
<button id="upSize">Larger</button>

CSS

.heading {
  font-size: 24px;
}

.content {
  font-size: 12px;
}

.footNote {
  font-size: 10px;
}

jQuery

$(function() {
 $("#upSize").click(function() {
    var headingSize = parseInt($(".heading").css("font-size"));
    var contentSize = parseInt($(".content").css("font-size"));
    var footNoteSize = parseInt($(".footNote").css("font-size"));
    headingSize = headingSize + 1 + "px";
    contentSize = contentSize + 1 + "px";
    footNoteSize = footNoteSize + 1 + "px";
    $(".heading").css({'font-size':headingSize});
    $(".content").css({'font-size':contentSize});
    $(".footNote").css({'font-size':footNoteSize});
  });
});

我的问题是，我怎么能一次瞄准所有元素？不产生很多线？

jquery

来源：https://stackoverflow.com/questions/36028884/how-to-change-font-size-of-multiple-elements-using-jquery

2条答案

按热度按时间

eyh26e7m1#

您可以循环遍历div中的每个child，并使用$(this)更改相应的元素

- 工作演示**

$(function() {
  $("#upSize").click(function() {
    $("div").children().each(function() {
      var size = parseInt($(this).css("font-size"));
      size = size + 1 + "px";
      $(this).css({
        'font-size': size
      });
    });
  });
});

.heading {
  font-size: 24px;
}
.content {
  font-size: 12px;
}
.footNote {
  font-size: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="heading">
    24px font
  </p>

  <p class="content">
    12px font
  </p>

  <span class="footNote">
    10px font
  </span>

  <button id="upSize">Larger</button>

- 仅供参考**

► .children()
► $(this)

赞(0）回复(0）举报 2023-06-22

t40tm48m2#

我需要增加所有元素的字体大小。但是字体大小继承中存在警告，因此我需要get all leaf nodes as well，并对文本中的 br 之类的标记提出警告

function addFontSize(fontAddition){
    $("*").filter(function() {
          return $(this).children('body,div,span').length == 0;
    }).each(function() {
        var size = parseInt($(this).css("font-size"));
        size = size + fontAddition + "px";
        $(this).css({
            'font-size': size
        });
    });
}
addFontSize(1);

赞(0）回复(0）举报 2023-06-22

我来回答

如何使用jQuery更改多个元素的字体大小

2条答案

相关问题

热门标签

最新问答