隱藏文章的按鈕

剛剛想到的。自己把 Javascript 亂加一加，拼出我想抄想很久但一直找不到程式碼的隱藏文章。

input 是在 Firefox 附加元件那篇用到的，我一開始是打連結，後來覺得按鈕會比較好看所以改成用按鈕。

接著是用「javascript 更改 css」下去 Google 找找到的這篇文章。我有把他的文章修改過，原文似乎是大陸人的文章。

分為改變直接樣式，改變 className 和改變 cssText 三種。

className
先在樣式表宣告 class 名稱。（就是 .hahaha {font-size:120%;} 這種）
要用的時候用 document.getElementById('obj').className="…" 或 this.className="..." 呼叫。

cssText
用 cssText 的話，必須要加上 style。正確的寫法是 document.getElementById('obj').style.cssText="…"

直接改變樣式
document.getElementById('obj').style.backgroundColor="#003366" 要記得寫到具體樣式。

注意：
1. Javascript 對大小寫很在意， className 不能寫成 classname。寫錯大小寫會失效。
2. 使用 className 的時候不要寫 style。 document.getElementById('obj').style.className="…" 這種寫法是錯誤的！

所以加一加，程式碼就出現啦！需要的就是一個按鈕，再來就是一個框框將要隱藏的內容包起來可以用 span 或 div。理論上應該是要用 div 啦，只是這樣會有個換行。下面藍色的都是可以自定名稱的，只是那兩對名稱要對好，不然就沒效了。

ＣＯＤＥ<input type="button" value="按鈕名稱" id="ButtonNameBox" onclick=" javascript:document.getElementById('ButtonName').style.display='inline'; javascript:document.getElementById('ButtonNameBox').style.display='none';">

<div id="ButtonName" style="display:none;">要隱藏的內容</div>

因為我不希望因為換模板的時候漏了某段程式碼就整個 Blog 的內容大爆炸，所以才會直接寫在文章裡頭。不然是可以用個 script 來進行呼叫，這樣會看起來清爽許多。

雖然我沒用到我最早看到的這篇裡頭所講的東西，不過他給當時的我一個想法。文章來自 Blogger 官方說明，是個需要改模板的方法。這就是為什麼我後來不用的原因，因為換模板的時候忘了，那就所有文章大爆炸。話說，這個方法就是用 className 的那個方法達到以 Javascript 修改 CSS 樣式。只不過我喜歡用直接修改樣式的方法。





其實我原本打算把這篇文章除了第一句其他都用這個按鈕包起來。不過後來想想還是算了 =3=。不過這篇文章沒有一個範例也說不過去，所以請按下面這個吧。

正襟危坐(?)的寶寶


寶寶與金莎



寶寶與金莎


寶寶的金莎版「眾卿平身」