Table of Contents

• element.style
• classList
  • add()
  • remove()
  • replace()
  • toggle()
• References

今天要來講如何在取得的元素上修改樣式。

element.style

HTML的element有幾種可以用的property，其中有一個為styleproperty，對選取的element使用style，會回傳一組動態的CSSStyleDeclaration物件的列表，列表只修改element的inline style（就是在element裡面新增一個style屬性，使用style來修改樣式的方法），假設原本的inline style的任一樣式已經被修改，那麽Javascript中使用element.style修改同樣的樣式，就會覆蓋原樣式。
如果想要清空樣式，可以在指定的內容中寫null。

比方說樣式中有width:400px，將其修改成1000px。

<p style='width:400px;  margin: 0 auto; padding: 20px; background:LightSeaGreen; text-align: center; color: white;font: 30px sans-serif;'>HOT POT</p>

const p = document.querySelector("p");
p.style.width = '1000px';

//清空樣式
p.style.width = null;

在CSS名稱轉換成Javascript時，需要注意：

1. 輸入的值如果有單位，使用element.style時也要把單位加上去。
2. 如果是一個單詞就保持原樣（width）來寫，唯獨float是Javascript保留字，可以寫成cssFloat。
3. 如果使用破折號分隔的名稱，需要改成小駝峰式（比如text-align改成textAlign）。

classList

classList是透過class的名稱來修改CSS的方法，對元素使用classList屬性，會回傳一組動態的DOMTokenList，並提供一些方法。
以平常寫樣式時都是從外部引入樣式表的方法，有需要時我會修改class名稱跟樣式表的選擇器內容，再使用classList。

add()

對元素新增一個class，可以用逗號隔開多個class名稱一次引入。

<p>HOT POT</p>

.text {
  width:400px;  
  margin: 0 auto;           
  padding: 20px;       
  background:LightSeaGreen; 
  text-align: center;   
  color: white;
  font: 30px sans-serif;
}

const p = document.querySelector("p");
p.classList.add('text');

remove()

使用這個方法可以一次移除一個或多個class name。

p.classList.remove('text');

replace()

使用這個方法可以取代特定的class名稱，寫法是replace(oldName, newName)。
首先我先把更改背景顏色的樣式獨立出來，並取名為backgroundColor1（取名請見諒。），希望背景顏色從LightSeaGreen更改成Gold。

<p class = 'text backgroundColor1'>HOT POT</p>

.text {
  width:400px;  
  margin: 0 auto;           
  padding: 20px;
  text-align: center;      
  color: white;
  font: 30px sans-serif;
}

.backgroundColor1{
background:LightSeaGreen; 
}

.backgroundColor2{
background:Gold; 
}

const p = document.querySelector("p");
p.classList.replace('backgroundColor1','backgroundColor2');

toggle()

toggle()的原理是在DOMTokenList移除原有的class某個名稱，並回傳一個false，如果這個class名稱不存在，就會被新增並回傳true，達到切換的效果。

語法為toggle(name, force)，第一個參數是放想控制的class名稱，第二個則是提供true或false、或是一個決定新增class的判斷式。

const p = document.querySelector("p");
//在window.innerWidth大於1000時，背景會變成gold
p.classList.toggle("backgroundColor2",window.innerWidth > 1000);

或者使用事件，可以透過點擊p去切換顏色：

const p = document.querySelector("p");
p.addEventListener('click',toggleBackground)
function toggleBackground(){   
  this.classList.toggle("backgroundColor2")
}

References

• MDN

1. HTMLElement: style property
2. style
3. CSSStyleDeclaration
4. Element: classList property
5. DOMTokenList: add() method
6. DOMTokenList: remove() method
7. DOMTokenList: replace() method
8. DOMTokenList: toggle() method