jquery - 如何用最小值制作大字体。用户偏好的字体大小

Question

我有一个字体大小为 12 的 div 集, 和另一个 div 在 24 .

当用户有让我们说一分钟。 font-size设置为 16px ，如何使用 24 制作 div使用新的 font-size 缩放 (x2)的 16 ？

(我实际上使用的是 em 而不是 px，所以小 div 字体设置为 .75em)

Answer 1

也许最简单的解决方案涉及 SASS，您可以在其中存储字体大小的变量。这是一个例子

$fontSize: 14px;

然后您可以在您的 css 中引用该值

div1 {
  font-size: $fontSize;
}

您还可以使用 SASS 变量执行算术运算。

div2 {
  font-size: $fontSize * 2;
}

如果您想更改字体大小，只需更改 $fontSize 变量的值，它将在两个选择中更新。

也可以通过 native JavaScript 执行此操作。

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var button = document.getElementById("my-button");
    
button.addEventListener("click", function() {
    var minFontSize = Number(prompt("Please enter your minimum font-size"));
    div1.style.fontSize = minFontSize + "px";
    div2.style.fontSize = (minFontSize * 2) + "px";
    div1.style.display = "block";
    div2.style.display = "block";
});

div {
  display: none;
}

<div id="div1">This is the first div</div>
<div id="div2">This is the second div</div>

<button id="my-button">Change Font Size</button>

分解

首先创建变量来引用您的两个 div 和一个按钮。这些将首先被赋予一个隐藏值。

然后我们将监听 click 事件，并提示最小字体大小。

我们现在可以使用 object.style.rule 语法设置 font-size 和 display 属性。

基本上，我们通过纯 JavaScript 缩放字体大小。

jQuery 也可以做到这一点。

$(document).ready(function() {
  $("#my-button").on("click", function() {
      var minFontSize = prompt("Please enter a minimum font size");
      $("#div1").css({"display": "block", "font-size": minFontSize + "px"});
      $("#div2").css({"display": "block", "font-size": (minFontSize * 2) + "px"});
  });
});

div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">This is the first div</div>
<div id="div2">
This is the second div
</div>

<button id="my-button">
Change Font Size
</button>

实际上使用 jQuery 更容易，因为您可以使用一个 css 声明添加多个样式。