Question

有人可以向我解释一下，为什么“ he”的id更改字体大小，但是为什么“ clanky”的ID保持不变。

<h1 id="he">Zoznam článkov / Article List</h1>
<main id="clanky"></main> //there are articles plugged in there in different function  

function myFunction() {
  document.getElementById("he").style.fontSize = "90px";
  document.getElementById("clanky").style.fontSize = "90px";
}

我尝试仅更改颜色以查看它是否可以整体使用，是的，两者的颜色均发生了变化。任何人可能都有一个主意，是什么阻止了“空白”字体大小的更改？

Answer 1

为了增加每个元素的字体大小，您将必须在某处设置根/默认值。通常这只是您<body>的样式。

示例（CSS）：

body {
    font-size: 16px;
}

现在有了“默认”大小，您可以转到所需的任何元素，并使用rem和em单位而不是px。

因此，您现在可以执行16px。而不是在每个元素上键入1em。

这意味着当您更改根大小时，使用em或rem的所有其他元素都将受到影响。

（注意：此代码段中按钮的字体大小不会更改。如果您希望这种情况发生，则必须在CSS {{1}中添加font-size: 1em; }标签。）

详细了解button和em单位here。

rem

document.getElementById('increaseFont').onclick = function () {
    var body = document.getElementsByTagName("BODY")[0]; 
    
    body.style.fontSize = "22px"; // - Whatever you want the font the increase to.
};

document.getElementById('defaultSize').onclick = function () {
    var body = document.getElementsByTagName("BODY")[0]; 
    
    body.style.fontSize = "16px"; // -- THE DEFAULT FONT SIZE IN CSS
};

body {
    font-size: 16px;
}

Answer 2

是的。您输入的内容不够多，但是我想您正在更改div，但是div中有CSS正在控制的标签。

https://jsfiddle.net/24emLxn7

<h1 id="he">Zoznam / Article List</h1>
<main id="clanky">blah blah</main>

<a href="#" onclick="myFunction();">push me 1</a>
<a href="#" onclick="myFunction2();">push me 2</a>

Answer 3

正如您所说的文章是从其他地方插入的那样，该文章中有嵌入式字体大小，您无法通过在父元素上设置字体大小来覆盖。就是这样。

Answer 4

工作正常。也许您在主标记中的div上还有其他事件。

var amount = value["amount"];

通过按钮更改文本大小

4 个答案: