如何增加某个class的所有div的字体大小

Question

我想为我网页的用户提供一种简单的方法来增加和减少属于 class="txt" 的所有元素的文本大小。下面代码片段中的两个按钮每次单击时都应将字体大小减小/增加 4pt（滑块也足够）。

我做了很多研究并尝试了不同的方法 (1, 2, 3)，但我无法使它们中的任何一种起作用。这些解决方案作用于元素的 id，所以我尝试用 getElementById('txt') 替换 getElementsByClassName('txt');仍然没有。

.txt {
  font-size: 14pt;
}

summary {
  font-size: 20pt;
}

/* STYLE */ .txt, summary { font-family: monospace; white-space: pre-wrap; }
/* STYLE */ .zoombox { display: flex; padding: 8pt 0pt; }

<div class="zoombox">
  <button class="btn zoom out">-</button>
  <div class="txt"> ZOOM </div>
  <button class="btn zoom in">+</button>
</div>

<details open>
  <summary>TITLE OF THE SONG</summary>
  <div class="txt chords">  Em   F        D#    </div>
  <div class="txt lyrics">A song with its lyrics</div>
</details>

Answer 1

这个例子可以帮助你找到你的答案仔细阅读这段代码特殊的 javascript 部分：

    function iWChangeEveryThing(){
      const fontSize = document.getElementById("numberr").value;
      const prag = document.getElementById("prag").style;
      prag.fontSize = fontSize + "px"
    }

    body{
      text-align: center;
    }
    button{
      font-size: 30px;
      padding: 30px;
    }

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <input type="number" id="numberr">
    <p id="prag">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, veritatis. Quaerat nam eos aspernatur nisi deserunt enim. Quam corrupti asperiores cupiditate recusandae aliquid at nisi quisquam quidem. Unde, dolor esse.</p>
    <button onclick="iWChangeEveryThing()">click me</button>
  </body>
</html>

Answer 2

你可以这样做。您将在正文上设置一个事件侦听器，但单击事件气泡以便单个事件侦听器将捕获对任何子项的点击。

这种方法可以防止缩放按钮也缩放。

let zoomIn = document.getElementById('zoomIn');
let zoomOut = document.getElementById('zoomOut');
let textArray = Array.from(document.getElementsByClassName('txt'));

document.querySelector('body').addEventListener('click', zoom);

function zoom(e) {
  textArray.forEach(txt => {
    let currentSize = parseFloat(window.getComputedStyle(txt).fontSize);
    if(e.target.classList.contains('in')) {
        txt.style.fontSize = (currentSize + 1) + 'px';
    }
    else {
        txt.style.fontSize = (currentSize - 1) + 'px';
    }
  })
}

.txt {
  font-size: 14pt;
}

summary {
  font-size: 20pt;
}

/* STYLE */ .txt, summary { font-family: monospace; white-space: pre-wrap; }
/* STYLE */ .zoombox { display: flex; padding: 8pt 0pt; }

<body>
  <div class="zoombox">
    <button id="zoomOut" class="btn zoom out">-</button>
    <div class="txt"> ZOOM </div>
    <button id="zoomIn" class="btn zoom in">+</button>
  </div>

  <div class="txt titles">TITLE OF THE SONG</div>
  <div class="txt chords">  Em   F        D#    </div>
  <div class="txt lyrics">A song with its lyrics</div>
</body>

Answer 3

您可以使用 getComputedStyle 获取当前值 font-size（作为带有度量单位的字符串）。然后我会建议乘以这个数字和一个系数，然后再次向它附加相同单位。对于增加或减少 10%，该系数可以是 1.1 或 0.9。

这是添加了该解决方案的 HTML：

document.querySelector("button.in").addEventListener("click", () => zoom(1.1));
document.querySelector("button.out").addEventListener("click", () => zoom(0.9));

function zoom(coeff) {
    document.querySelectorAll(".txt, summary").forEach(el => {
        let css = getComputedStyle(el).getPropertyValue("font-size");
        let size = parseFloat(css);
        let unit = css.replace(/[\d.-]*/, "");
        el.style.fontSize = size * coeff + unit;
    });
}

summary { font-size: 20pt }
.txt { font-family: monospace; white-space: pre-wrap; font-size: 14pt }
.zoombox { display: flex; padding: 8pt 0pt }

<div class="zoombox">
  <button class="btn zoom out">-</button>
  <div class="txt"> ZOOM </div>
  <button class="btn zoom in">+</button>
</div>

<details open>
  <summary>TITLE OF THE SONG</summary>
  <div class="txt chords">  Em   F        D#    </div>
  <div class="txt lyrics">A song with its lyrics</div>
</details>

Answer 4

遍历数组

getElementById('txt') 将 return 单个元素； getElementsByClassName('txt') 将 return 一个数组。您需要遍历元素并更改字体大小。

这是一个工作示例：https://jsbin.com/mozobik/edit?html,output

Answer 5

首先，您应该格式化 html 代码。我建议您将 html 类格式化为下面给出的代码。

const val = document.querySelectorAll(".txt");
const zoomin = document.querySelector(".zoom-in");
const zoomout = document.querySelector(".zoom-out");

function zoom_in() {
  val.forEach((element) => {
    const fonsi = window
      .getComputedStyle(element, null)
      .getPropertyValue("font-size");
    const currentSize = parseFloat(fonsi);
    element.style.fontSize = currentSize + 1 + "px";
  });
}

zoomin.addEventListener("click", () => {
  zoom_in();
});

<div class="zoombox">
    <button class="btn zoom-out">-</button>
    <div class="txt"> ZOOM </div>
    <button class="btn zoom-in">+</button>
</div>
      
<div class="txt titles">TITLE OF THE SONG</div>
<div class="txt chords">  Em   F        D#    </div>
<div class="txt lyrics">A song with its lyrics</div>

并且可以在zoom_in函数的基础上写一个zoom-out函数。

Answer 6

这就是我实现它的方式，而且我使用 px 而不是 pt

const zoomOut = document.querySelector(".zoom__out");
const zoomIn = document.querySelector(".zoom__in");
const texts = document.querySelectorAll(".txt");

// whatever size you want as default
let curFontSize = 14;

zoomOut.addEventListener("click", function () {
  curFontSize -= 4;
  texts.forEach((el) => {
    el.style.fontSize = `${curFontSize}px`;
  });
});

zoomIn.addEventListener("click", function () {
  curFontSize += 4;
  texts.forEach((el) => {
    el.style.fontSize = `${curFontSize}px`;
  });
});

<div class="zoombox">
  <button class="btn zoom out">-</button>
  <div class="txt"> ZOOM </div>
  <button class="btn zoom in">+</button>
</div>

<details open>
  <summary>TITLE OF THE SONG</summary>
  <div class="txt chords">  Em   F        D#    </div>
  <div class="txt lyrics">A song with its lyrics</div>
</details>

如何增加某个class的所有div的字体大小

How to increase font-size of all divs of a certain class

html

javascript

css

class

selection