在网页上显示字体大小

Ray 发表于 Dev

射线

我有一个网页，允许访问者使用 Jquery 脚本更改页面上的字体大小。调整大小脚本工作正常，但是我需要它来显示页面上字体的大小。Document.write 似乎不起作用，或者我做错了。这是我尝试过的

document.querySelector('.results');
$('.results').html(fontSize);

$(document).ready(function() {
  var fontSize;
  $("#insize").click(function() {
    fontSize = parseInt($("p").css('font-size'));
    fontSize = fontSize + 3 + "px";
    $("p").css({
      'font-size': fontSize
    });
  });
  $("#desize").click(function() {
    fontSize = parseInt($("p").css('font-size'));
    fontSize = fontSize - 3 + "px";
    $("p").css({
      'font-size': fontSize
    });
  });
});

<a href="#" id="desize">increase font</a>
<a href="#" id="insize">decrease font</a>
<p class="results">results</p>

那没有用，我得到了未定义的结果。所以接下来，我尝试了这个

var fontSize;
$("#insize").click(function() {
  fontSize = parseInt($("p").css('font-size'));
  fontSize = fontSize + 3 + "px";
  $("p").css({
    'font-size': fontSize
  });
  $("#fsize").document.write(fsize);
})

<p id="fsize"></p>

这也不起作用，我尝试了很多其他方法，在我看来，可以显示声明的 var，但无法获取网页上文本的当前字体大小，顺便说一句，它只是<p>我关心的元素，因为<h1>和其他元素具有不同的字体大小值。

如何在不编写数英里的代码来完成它的情况下在屏幕上显示当前字体大小？可以用简单的 EG 来完成$("#fsize").write("p");吗？

自由-m

尝试使用 document.write 可以替换为 .text()

$("#fsize").document.write(fsize);

变成

$("#fsize").text(fsize);

.html(fsize)如果它在事件处理程序中，您的第一次尝试也会成功。

更新的代码（以正确的方式增加/减少）：

$(document).ready(function() {
  var fontSize;
  $("#insize").click(function() {
    fontSize = parseInt($("p").css('font-size'));
    fontSize = fontSize + 3 + "px";
    $("p").css({
      'font-size': fontSize
    });
    
    $(".results").text("font size: " + fontSize);
    
  });
  $("#desize").click(function() {
    fontSize = parseInt($("p").css('font-size'));
    fontSize = fontSize - 3 + "px";
    $("p").css({
      'font-size': fontSize
    });
    
    $(".results").text("font size: " + fontSize);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="insize">increase font</a>
<a href="#" id="desize">decrease font</a>
<p class="results">results</p>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。