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，但是我将要做以下事情：

在函数（或函数副本）中为“类名”添加新参数，
添加classname管理，以使用font-size循环更改所有相应元素的forEach。

⋅⋅⋅

摘要：

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>

更改所选类的页面上的字体大小

2 个答案: