CSS 特異性

當css規則包含多個類時，瀏覽器會根據

uj5u.com熱心網友回復：

用于:root將初始大小設定為16px。我們可以rem使用相對字體大小進行進一步的樣式設定。如果我們將:root字體大小從 16 更改為 18 并使用rem，那么它將自動為您的h1toh6和p標簽更新每隔一個字體大小。要改變這一點，我們可以使用 JavaScript。我們只需要一個附加到按鈕的點擊事件偵聽器，并將所需的字體大小作為'18px'or傳遞'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>

uj5u.com熱心網友回復：

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

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>

uj5u.com熱心網友回復：

因為您在 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)
}

標籤：javascript html css 按钮 字体

上一篇：PHP中的按鈕更改編號

下一篇：為什么我的陣列不會回到0(javascript)？