無法使用 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'來維護 object 引用。

編輯：

對於“維護 object 參考”，我的意思是.fontStyle屬性的工作方式類似於設置器和獲取器 function 並且似乎只是 CSSStyleDeclaration ZA8CFDE6331BD59EB2AC96F8911C4B6 的屬性如果您只是讀取 getter 的值並存儲它的結果，那么更改值導致元素樣式更改的實際效果就會丟失。

有關更多信息，請參閱 MDN 上的CSSStyleDeclaration和ElementCSSInlineStyle對象，以及getter和setter 。

如果您的問題有一個有用的答案，您可以將其標記為已接受。 它不僅可以幫助編寫它的人，還可以幫助遇到相同問題並在搜索時遇到此問題的其他人。

Answer 2

您可以使用常見的 function 並將所需的字體大小傳遞給 onclick 上的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>