无法使用 javascript 更改 HTML 的文本大小

Question

我的代码无法更改 HTML 页面文本内容的字体大小。

这是我的代码：

let size=document.querySelector('#content').style.fontSize

document.querySelector('#largeText').onclick= function(){
    size="40px"
}
document.querySelector('#normalText').onclick= function(){
    size="20px"
}
document.querySelector('#smallText').onclick= function(){
    size="12px"
}

这是我的 HTML。我在这里只粘贴定义按钮以更改文本的 HTML：

<div>
    <button id="smallText" class="mx-2 my-2 px-2">
        small
    </button>
    <button id="normalText"  class="mx-2 my-2 px-2">
        normal
    </button>
    <button id="largeText"  class="mx-2 my-2 px-2">
        large
    </button>
    </div>
</div>

Answer 1

你只是覆盖了你的变量。

将let style = document.querySelector('#content').style保存为变量，然后使用style.fontSize = '40px'，维护对象引用。

编辑：

对于“维护对象引用”，我的意思是 .fontStyle 属性的工作方式类似于 setter 和 getter 函数，并且似乎只是 CSSStyleDeclaration 对象的一个​​属性。如果你只是读取getter的值并存储它的结果，那么改变值导致元素样式改变的实际效果就会丢失。

有关更多信息，请参阅 MDN 上的 CSSStyleDeclaration 和 ElementCSSInlineStyle 对象，以及 getter 和 setter。

如果您的问题有一个有用的答案，您可以将其标记为已接受。它不仅可以帮助编写它的人，还可以帮助遇到相同问题并在搜索时遇到此问题的其他人。

Answer 2

您可以使用通用函数并将所需的字体大小传递给onclick 上的函数，如下所示

onclick="changeTextSize(10);"

function changeTextSize(size) {
  document.getElementById('content').style.fontSize = size + 'px';
}

<div>
  <button id="smallText" onclick="changeTextSize(10);" class="mx-2 my-2 px-2">
                    small
                </button>
  <button id="normalText" onclick="changeTextSize(20);" class="mx-2 my-2 px-2">
                    normal
                </button>
  <button id="largeText" onclick="changeTextSize(40);" class="mx-2 my-2 px-2">
                    large
                </button>
</div>

<div id="content">
  sample text
</div>