更改頁面上所選類的字體大小

Question

我有這個代碼：

function czcionka_zmien_rozmiar(punktow) {
        var e = document.getElementsByTagName("BODY")[0];
        var style = window.getComputedStyle(e);
        var rozmiar = style.getPropertyValue('font-size');
        rozmiar = rozmiar.replace("px", "");
        rozmiar = rozmiar * 1;
        rozmiar = rozmiar + punktow;
        e.style.fontSize = rozmiar + "px";
        localStorage.setItem("rozmiar", rozmiar);
    }

    function czcionka_ustaw_zapisany_rozmiar() {
        var rozmiar = localStorage.getItem("rozmiar");
        if (rozmiar!==null) {
            var e = document.getElementsByTagName("BODY")[0];
            e.style.fontSize = rozmiar + "px";
        }
    }


    document.addEventListener("DOMContentLoaded", czcionka_ustaw_zapisany_rozmiar);

此功能會增加頁面上的字體大小。 我想這樣做是為了放大或縮小以下類的字體：.tresc、.tytul、.opis。 怎么做？

目前，類 .tresc、.tytul 和 .opis 具有不同的大小（用 PX 編寫）。

Answer 1

所以，我從您的問題中了解到，您希望某些類使用更大的字體大小。 我不確定你是否希望它動態變大，但我已經准備好了代碼假設你這樣做了。

CSS：

.changed-font{
  fontSize: 15px //assuming 15px is bigger than what you currently have
}

Javascript：

function changeClass(classname,element)
{ 
     element.classList.add(classname);
}
function czcionka_zmien_rozmiar(punktow) {
        var e = document.getElementsByTagName("BODY")[0];
        var style = window.getComputedStyle(e);
        var rozmiar = style.getPropertyValue('font-size');
        changeClass("changed-font",e) 
}

現在，如果您想更改為動態值，則類名並不重要。

如果您只想更改函數來處理您的類.tresc, .tytul, and .opis那么您只需要更改：

var e = document.getElementsByTagName("BODY")[0];

到：

var e = document.getElementsByClassName(".tresc")[0];

Answer 2

我localStorage知道您如何使用localStorage ，但這是我要做的：

• 在您的函數（或函數的副本）中為“classname”添加一個新參數，
• 添加classname管理以使用forEach循環更改所有相應元素的font-size 。

⋅ ⋅ ⋅

片段：

 function czcionka_zmien_rozmiar(punktow, classname) { // punktow management var e = document.getElementsByTagName("BODY")[0]; var style = window.getComputedStyle(e); var rozmiar = style.getPropertyValue('font-size'); rozmiar = rozmiar.replace("px", ""); rozmiar = +rozmiar + punktow; // classname management var els = document.getElementsByClassName(classname); Array.from(els).forEach((el) => { el.style.fontSize = rozmiar + "px"; }); } // Call the function document.addEventListener("DOMContentLoaded", czcionka_zmien_rozmiar(0, "tresc")); document.addEventListener("DOMContentLoaded", czcionka_zmien_rozmiar(6, "tytul")); document.addEventListener("DOMContentLoaded", czcionka_zmien_rozmiar(12, "opis"));

 <p class="tresc">tresc</p> <p class="tytul">tytul</p> <p class="opis">opis</p>