前情提要

還在寫行內樣式醜醜的嗎？教你不用寫css檔案，使用javascript來動態修改樣式的招數！ 這樣子處理的層次又更不一樣， 前端之路有你有我，馬上來看看這是怎麼完成的。

要修改CSS怎麼做呢？物件儲存

首先樣式寫成物件

```css= const die={ display:"none" }

為什麼要寫成物件呢？修改一種，可能看不出來，修改很多樣式就能感受到，
物件這個儲存方式是有它特別的美感與好處的。
下面我來舉例：

```css=
const wrapperStyle = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%,-50%)',
  width: '350px',
  backgroundColor: '#261d4a',
  borderRadius: '5px',
  transition: 'box-shadow .5s ease',
  overflow: 'hidden'
};

語法介紹 Object.assign

使用範例 Object.assign(element.style,Style) element是你要修改的元素，Style是樣式寫的object

這是修改一個的情況，當像是上面很多屬性要改的話，我們物件與JS的好處就產生了！ 直接使用迴圈來全部套入： ```javascript= const wrapper = document.getElementsByClassName('wrapper'); for (let i = 0; i < wrapper.length; i++) { Object.assign(wrapper[i].style, wrapperStyle); }

[MDN官網說明](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)

[JS 原力覺醒 Day27 - JS 常用 API - Object.assign && Object.defineProperty](https://ithelp.ithome.com.tw/notifications)

## 還有沒有別的寫法？

有。

document.getElementById("myElement").style.cssText = display: block; position: absolute;;

這樣寫也跟原生css寫起來差不多，比較舒服。
用這種比較分離畫面與程式的寫法，
體感上爽度更高。

就不會是找到元素後還要.style.display="none"
一直.屬性.進去點點點這樣。

## 說好的三種呢？

function setStyle( objId, propertyObject ) { var elem = document.getElementById(objId); for (var property in propertyObject) elem.style[property] = propertyObject[property]; }

setStyle('myElement', {'fontsize':'12px', 'left':'200px'});

``` 這種寫成function的風格我也很愛，感覺很舒服，跟第一個的有點類似卻不太一樣。 這個是把迴圈弄再函式了，所以呼叫一次就會全部修改。 第一個則是把物件內的東西丟給迴圈，一次一次去做改動變化， 邏輯上一模一樣，手段跟風格差異而已唷。

stackoverflow

心得

使用這個小技巧很有趣，之後我們會應用到「JS油猴系列-遮蔽廣告腳本，自定義新增名單」文章裡面。 當要寫腳本，很需要JS動態修改CSS的時候，這種小技巧就佔了很大的角色呢٩(๑•̀ω•́๑)۶！ 是不是沒有想到居然可以用JS修改呀！

加上我認為比較差的寫法，就不只三種了呢。 趕快選一種喜歡的， 練習成自己的寶藏知識吧！