動態的 CSS rules

例如說…有登入 Google 後，網頁上的某些 button 就要顯示，反之隱藏；如果用 JavaScript，那麼每次新加入 button，就都要檢查一次，很麻煩；或者有時候要覆蓋 style sheets 裡面的東西，也可以用這方法。

比較懶一點的方法，就是所有要顯示或不顯示的元素，都有一個例如叫做 blogMgmt 的 class。

<button class="blogMgmt">BUTTON</button>

登入的時候，是這樣：
.blogMgmt { display:inline !important; }

沒有登入的時候，是這樣：
.blogMgmt { display:none !important; }

然後兩小段文字分別轉成 data URI，我是在 https://dopiaza.org/tools/datauri/index.php 這兒轉，轉出來的 mime type 要改成 text/css (原本是 text/plain)，轉出來就分別是:

• data:text/css;charset=utf-8;base64,LmJsb2dNZ210IHsNCmRpc3BsYXk6aW5saW5lIWltcG9ydGFudDsNCn0=
• data:text/css;charset=utf-8;base64,LmJsb2dNZ210IHsNCmRpc3BsYXk6bm9uZSAhaW1wb3J0YW50Ow0KfQ==

然後……千言萬語，不如去看 JSFiddle，有用到 MooTools：



那麼：

• 為什麼不用 JavaScript，像是 document.body.getElements('.blogMgmt').addClass('w3-show');？

  因為，在跑完上一行之後，如果又有新的元素加進來，那不是很麻煩……直接覆蓋 CSS，不是簡單多了嗎！

• 為什麼不直接給 style sheet 檔案，要給 data URI？

  當然也可以給檔案，可是才三行而已，少一些網路存取，不是很好嗎？而且，data URI 可以從 JavaScript 產生，請參考 這裡，所以內容可以是動態的，例如 btoa(".blogMgmt { display:inline !important;}") 產生 base64 編碼，前面在加上 data:text/css;charset=utf-8;base64, 就可以用了。

• 那個直接把 style sheet 給 disabled，是哪招？

  我也是剛學會的。