2012年4月13日 星期五

隱藏文章的按鈕

剛剛想到的。自己把 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 啦,只是這樣會有個換行。下面藍色的都是可以自定名稱的,只是那兩對名稱要對好,不然就沒效了。

CODE<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=。不過這篇文章沒有一個範例也說不過去,所以請按下面這個吧。