如何增加某個類的所有div的字體大小-有解無憂

我想為我的網頁的用戶提供一種簡單的方法來增加和減少屬于的所有元素的文本大小。以下片段中的兩個按鈕應在每次單擊時將字體大小減小/增加 4pt（滑塊也足夠了）。

我做了很多研究并嘗試了不同的方法（1、2、3），但我無法使它們中的任何一個起作用。這些解決方案作用于id元素，因此我嘗試將getElement ById ('txt')替換為getElement sByClassName ('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>

uj5u.com熱心網友回復：

您可以使用getComputedStyle來獲取當前的字體大小（作為具有度量單位的字串）。然后我建議將這個數字乘以一個系數，然后再次將相同的單位附加到它。對于 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>

uj5u.com熱心網友回復：

跨過陣列

getElementById('txt')將回傳單個元素；getElementsByClassName('txt')將回傳一個陣列。您需要逐步瀏覽元素并更改字體大小。

這是一個作業示例：https ://jsbin.com/mozobik/edit?html,output

uj5u.com熱心網友回復：

你可以做這樣的事情。您將在主體上設定一個事件偵聽器，但是單擊事件冒泡，以便單個事件偵聽器將捕獲對任何子項的點擊。

這種方法可以防止縮放按鈕也縮放。

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>

uj5u.com熱心網友回復：

這個例子可以幫助你找到你的答案仔細閱讀這段代碼特殊的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>

uj5u.com熱心網友回復：

首先，你應該格式化你的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函式。

uj5u.com熱心網友回復：

這就是我將如何實作它，并且我使用 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/450469.html

標籤：javascript html css 班级选择

上一篇：更改子類的條件類實體

下一篇：在Java中獲取泛型引數的類物件表示