如何使用 javascript 使用按鈕更改字體大小 h1 - h6？

Question

我試圖通過單擊一個按鈕來更改字體大小，從 16 像素變為 18 像素，反之亦然。 因此，我使用 css 以兩種不同的比例定義了從 h1 到 h6 的樣式。

我知道我可以使用 Javascript 並將我創建的不同類分配給 h1 和 h6 標簽，但我不知道從哪里開始。 現在我只有html和css。 任何好心人都可以通過向我展示一種方法來幫助我嗎？

事實上，我什至不知道這是否是定義樣式然后將它們應用於標簽的正確方法。 對不起，但我是新人，我很感激任何回應。

 /*16px Major Third 1.250 Scale Factor*/ .main_container > h1 { font-size: 31.25px; } .main_container > h2 { font-size: 25px; } .main_container > h3 { font-size: 20px; } .main_container > h4 { font-size: 16px; } .main_container > h5 { font-size: 12.8px; } .main_container > h6 { font-size: 10.24px; } .main_container > p { font-size: 16px; } /*18px Major Third 1.250 Scale Factor*/ .main_container > h1 { font-size: 35.16px; } .main_container > h2 { font-size: 28.13; } .main_container > h3 { font-size: 22.5px; } .main_container > h4 { font-size: 18px; } .main_container > h5 { font-size: 14.4; } .main_container > h6 { font-size: 11.52; } .main_container > p { font-size: 18px; }

 <button class="regular">Set 16px Typography</button> <button class="regular">Set 18px Typography</button> <div class="main_container"> <h1>Almost before we knew it, we had left the ground.</h1> <h2>Almost before we knew it, we had left the ground.</h2> <h3>Almost before we knew it, we had left the ground.</h3> <h4>Almost before we knew it, we had left the ground.</h4> <h5>Almost before we knew it, we had left the ground.</h5> <h6>Almost before we knew it, we had left the ground.</h6> <p>Almost before we knew it, we had left the ground.</p> </div>

Answer 1

解決此問題的一般方法是在單擊按鈕時向其中一個元素添加一個類。

課程

Html 元素可以有多個類。 它們之間用空格隔開 IE <div class="main_container big green>表示它有 3 個類，“main_container”、“big”和“green”

CSS 特異性

當一個 css 規則包含多個類時，瀏覽器會根據特定性確定應用哪些 css 規則，它將獲得“特定性”，即.main_container {..rules..}不如.main_container.big {..rules..}

規則實際上是組合在一起的，任何重復的規則都將被最具特異性的選擇器覆蓋。

例子

在這個例子中，我們結合了它。 .main_container和.main_container.big有 css 規則，html 元素僅以main_container 。 當我們單擊按鈕時，添加了big 。 然后瀏覽器應用附加的 CSS 規則

 function setBig() { document.querySelector(".main_container").classList.add('big'); } function removeBig() { document.querySelector(".main_container").classList.remove('big'); }

 /*16px Major Third 1.250 Scale Factor*/ .main_container>h1 { font-size: 31.25px; } .main_container>h2 { font-size: 25px; } .main_container>h3 { font-size: 20px; } .main_container>h4 { font-size: 16px; } .main_container>h5 { font-size: 12.8px; } .main_container>h6 { font-size: 10.24px; } .main_container>p { font-size: 16px; } /*18px Major Third 1.250 Scale Factor*/ .main_container.big>h1 { font-size: 35.16px; } .main_container.big>h2 { font-size: 28.13; } .main_container.big>h3 { font-size: 22.5px; } .main_container.big>h4 { font-size: 18px; } .main_container.big>h5 { font-size: 14.4; } .main_container.big>h6 { font-size: 11.52; } .main_container.big>p { font-size: 18px; }

 <button class="regular" onClick="removeBig()">Set 16px Typography</button> <button class="regular" onClick="setBig()">Set 18px Typography</button> <div class="main_container"> <h1>Almost before we knew it, we had left the ground.</h1> <h2>Almost before we knew it, we had left the ground.</h2> <h3>Almost before we knew it, we had left the ground.</h3> <h4>Almost before we knew it, we had left the ground.</h4> <h5>Almost before we knew it, we had left the ground.</h5> <h6>Almost before we knew it, we had left the ground.</h6> <p>Almost before we knew it, we had left the ground.</p> </div>

Answer 2

如果您不想使用類，可以按如下方式解決此問題。

但這不推薦。 使用類更好。

Answer 3

使用:root將初始大小設置為16px 。 我們可以使用rem進行進一步的樣式設置，因為它將使用相對字體大小。 如果我們將:root字體大小從 16 更改為 18 並使用rem ，那么它將自動為您的h1到h6和p標簽更新每隔一個字體大小。 要改變這一點，我們可以使用 JavaScript。 我們只需要一個附加到按鈕的點擊事件偵聽器，並將所需的字體大小傳遞為'18px'或'24px' 。

簡單來說：

• 用初始字體大小定義 :root
• 添加 javascript 函數以更改 :root 字體大小
• 在 css 中盡可能使用 rem

 const root = document.querySelector(':root'); const setFontSize = (fontSize) => { root.style.fontSize = fontSize; }

 :root { font-size: 16px; } /* 1.250 Scale Factor*/ .main_container > h1 { font-size: 1.953125rem; /* (1 * 1.25^3) */ } .main_container > h2 { font-size: 1.5625rem; /* (1 * 1.25^2) */ } .main_container > h3 { font-size: 1.25rem; /* (1 * 1.25) */ } .main_container > h4 { font-size: 1rem; } .main_container > h5 { font-size: 0.8rem; /* (1 / 1.25) */ } .main_container > h6 { font-size: 0.64rem; /* (1 / 1.25^2) */ } .main_container > p { font-size: 1rem; }

 <button class="regular" onclick="setFontSize('16px')">Set 16px Typography</button> <button class="regular" onclick="setFontSize('18px')">Set 18px Typography</button> <div class="main_container"> <h1>Almost before we knew it, we had left the ground.</h1> <h2>Almost before we knew it, we had left the ground.</h2> <h3>Almost before we knew it, we had left the ground.</h3> <h4>Almost before we knew it, we had left the ground.</h4> <h5>Almost before we knew it, we had left the ground.</h5> <h6>Almost before we knew it, we had left the ground.</h6> <p>Almost before we knew it, we had left the ground.</p> </div>

Answer 4

您可以根據單擊的按鈕添加和刪除類。 我剛剛想出了這個解決方案。

 const btnSixteen = document.querySelector('.sixteen'); const btnEighteen = document.querySelector('.eighteen'); const mainContainer = document.querySelector('.main_container'); btnSixteen.addEventListener('click',()=>{ mainContainer.classList.remove('eighteenBase'); mainContainer.classList.add('sixteenBase'); }); btnEighteen.addEventListener('click',()=>{ mainContainer.classList.remove('sixteenBase'); mainContainer.classList.add('eighteenBase'); })

 /*16px Major Third 1.250 Scale Factor*/ .main_container.sixteenBase > h1 { font-size: 31.25px; } .main_container.sixteenBase > h2 { font-size: 25px; } .main_container.sixteenBase > h3 { font-size: 20px; } .main_container.sixteenBase > h4 { font-size: 16px; } .main_container.sixteenBase > h5 { font-size: 12.8px; } .main_container.sixteenBase > h6 { font-size: 10.24px; } .main_container > p { font-size: 16px; } /*18px Major Third 1.250 Scale Factor*/ .main_container.eighteenBase > h1 { font-size: 35.16px; } .main_container.eighteenBase > h2 { font-size: 28.13; } .main_container.eighteenBase > h3 { font-size: 22.5px; } .main_container.eighteenBase > h4 { font-size: 18px; } .main_container.eighteenBase > h5 { font-size: 14.4; } .main_container.eighteenBase > h6 { font-size: 11.52; } .main_container > p { font-size: 18px; }

 <button class="regular sixteen">Set 16px Typography</button> <button class="regular eighteen">Set 18px Typography</button> <div class="main_container"> <h1>Almost before we knew it, we had left the ground.</h1> <h2>Almost before we knew it, we had left the ground.</h2> <h3>Almost before we knew it, we had left the ground.</h3> <h4>Almost before we knew it, we had left the ground.</h4> <h5>Almost before we knew it, we had left the ground.</h5> <h6>Almost before we knew it, we had left the ground.</h6> <p>Almost before we knew it, we had left the ground.</p> </div>

Answer 5

CSS規范中已經規定了這種東西，它是相對單位。 在這里你必須使用em單位，--> 所有字體大小都將相對於它們的父級

文檔： https ://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

示例代碼：

 function set_font_size_big(test) { document.querySelectorAll('.main_container').forEach( el => el.classList.toggle('big',test)) }

 .main_container { font-size : 16px; } .main_container.big { font-size : 18px; } .main_container > h1 { font-size: 1.95em; } .main_container > h2 { font-size: 1.56em; } .main_container > h3 { font-size: 1.25em; } .main_container > h4 { font-size: 1em; } .main_container > h5 { font-size: 0.8em; } .main_container > h6 { font-size: 0.64em; }

 <button onclick="set_font_size_big(false)"> normal (16px) </button> <button onclick="set_font_size_big(true)"> big (18px) </button> <div class="main_container"> <h1>Almost before we knew it, we had left the ground.</h1> <h2>Almost before we knew it, we had left the ground.</h2> <h3>Almost before we knew it, we had left the ground.</h3> <h4>Almost before we knew it, we had left the ground.</h4> <h5>Almost before we knew it, we had left the ground.</h5> <h6>Almost before we knew it, we had left the ground.</h6> <p>Almost before we knew it, we had left the ground.</p> </div>

但最好的辦法是使用 CSS 變量，這樣您就不必在每個.main_container元素文檔中添加/刪除大類： https ://developer.mozilla.org/en-US/docs/Web/ CSS/Using_CSS_custom_properties

這給了你更多的可能性，比如這里有一個范圍類型的輸入

 const Root = document.documentElement , fontSizRange = document.querySelector('#font_size_range') , fontSizRangeVal = document.querySelector('#font_size_range + label') , sizelabel = { 14 : 'small' , 16 : 'normal' , 18 : 'big' , 20 : 'biggest' , 22 : 'enormous' } ; function setFontSize() { fontSizRangeVal.textContent = sizelabel[ fontSizRange.value ] Root.style.setProperty('--mc_f_size', fontSizRange.value + 'px' ) } setFontSize() // init fontSizRange.oninput = setFontSize

 :Root { --mc_f_size: 16px; } .main_container { font-size : var(--mc_f_size); } .main_container > h1 { font-size: 1.95em; } .main_container > h2 { font-size: 1.56em; } .main_container > h3 { font-size: 1.25em; } .main_container > h4 { font-size: 1em; } .main_container > h5 { font-size: 0.8em; } .main_container > h6 { font-size: 0.64em; }

 <input type="range" id="font_size_range" min="14" max="22" step="2" value="16"><label></label> <div class="main_container"> <h1>Almost before we knew it, we had left the ground.</h1> <h2>Almost before we knew it, we had left the ground.</h2> <h3>Almost before we knew it, we had left the ground.</h3> <h4>Almost before we knew it, we had left the ground.</h4> <h5>Almost before we knew it, we had left the ground.</h5> <h6>Almost before we knew it, we had left the ground.</h6> <p>Almost before we knew it, we had left the ground.</p> </div>

---

PO評論：最后一個疑問，我可以用按鈕替換范圍滑塊嗎？ 我正在嘗試根據您的示例執行此操作，但我不能。

 function set_font_size( val ) { document.documentElement.style.setProperty('--mc_f_size', val + 'px' ) }

 :Root { --mc_f_size: 16px; } .main_container { font-size : var(--mc_f_size); } .main_container > h1 { font-size: 1.95em; } .main_container > h2 { font-size: 1.56em; } .main_container > h3 { font-size: 1.25em; } .main_container > h4 { font-size: 1em; } .main_container > h5 { font-size: 0.8em; } .main_container > h6 { font-size: 0.64em; }

 <button onclick="set_font_size(16)"> normal (16px) </button> <button onclick="set_font_size(18)"> big (18px) </button> <div class="main_container"> <h1>Almost before we knew it, we had left the ground.</h1> <h2>Almost before we knew it, we had left the ground.</h2> <h3>Almost before we knew it, we had left the ground.</h3> <h4>Almost before we knew it, we had left the ground.</h4> <h5>Almost before we knew it, we had left the ground.</h5> <h6>Almost before we knew it, we had left the ground.</h6> <p>Almost before we knew it, we had left the ground.</p> </div>

Answer 6

因為您在 html 中定義了 h1 到 h6 標簽，所以它們有自己的字體大小。 您不必在 css 文件中添加這些樣式。

相反，您可以在 css 中添加兩個類

.font16{ 字體大小：16px }

.font18{ 字體大小：16px }

然后將這些類動態應用於要更改字體大小的元素。

例如：

const applyClassToElemets =(elements,className)=>{

elements.forEach(element=>element.classList.add(className))
}


const changeToSize18 = () =>{
const allH1Elements = document.querySelectorAll("h1"); 
applyClassToElemets(allH1Elements,font18)
}

const changeToSize16 = () =>{
const allH1Elements = document.querySelectorAll("h1"); 
applyClassToElemets(allH1Elements,font16)
}