gpt4 book ai didi

javascript - 通过按钮更改文字大小

转载 作者:行者123 更新时间:2023-11-28 16:50:49 24 4
gpt4 key购买 nike

谁能给我解释一下,为什么“he”的 id 会改变字体大小,而 id “clanky”却保持不变。

<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";
}

我尝试只更改颜色以查看它是否整体有效,是的,两者的颜色都发生了变化。任何人都可能有想法,是什么阻止了更改“笨拙”的字体大小?

最佳答案

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

示例 (CSS):

body {
font-size: 16px;
}

现在有了“默认”大小,您可以转到您想要的任何元素并使用 remem单位而不是 px .

所以不用输入 16px在每个元素上,你现在可以做 1em .

这意味着当您更改根大小时,使用 em 的所有其他元素或 rem应该生效。

(注意:此代码段中按钮的字体大小不会改变。如果您希望发生这种情况,您必须在 CSS 中将 font-size: 1em; 添加到您的 button 标签。)

阅读更多关于 em 的信息和 rem单位 here .

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;
}
<h1>I am a heading!</h1>
<p>I'm just a small paragraph...</p>

<button id="increaseFont" type="button">
Increase all fonts
</button>

<button id="defaultSize" type="button">
Default font size
</button>

关于javascript - 通过按钮更改文字大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59035477/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com