Re: [問題] 請教 "利用JavaScript與CSS，變換字色"

看板Web_Design作者TKirby ( ^-^)時間19年前 (2006/02/21 16:03)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串4/4 (看更多)

真的要玩弄 css 的話，以下是一些手段 : 1. 藉由 DOM Level 3 document.getElementsByTagName("style")[0].innerHTML = ".a{color:#099;}"; 這只有 Firefox 支援也可以 document.getElementsByTagName("head")[0].removeChild( document.getElementsByTagName("style")[0]); 來移除 style 效果不過 IE 都不讓你這樣玩 2. 藉由 DOM Level 2 W3C 為 Stylesheet 訂了一份 ECMAScript 的 binding http://www.w3.org/TR/DOM-Level-2-Style/ecma-script-binding.html IE 的情況是 document.styleSheets[0].removeRule(".a"); document.styleSheets[0].addRule(".a","color:#009;"); 也可以修改整個樣式表 document.styleSheets[0].cssText = " .a {color:#099;}"; ( 參考 http://0rz.net/fb15f ) Firefox 則是 document.styleSheets[0].deleteRule(".a"); document.styleSheets[0].insertRule(".a {color:#099};",0); (參考 http://developer.mozilla.org/en/docs/DOM:stylesheet ) 要注意 IE 用 addRule, Firefox 用 insertRule IE 用 removeRule, Firefox 用 deleteRule IE 跟 Firefox 在移除樣式規則時參數一樣但是在新增樣式規則時, Firefox 把 IE 的前兩個參數接起來了基本上 Firefox 是遵循標準的因為我幾乎沒用過這東西所以我也不是十分確定其它 Opera, Safari 我不確定他們支不支援 DOMLevel2-Style 不過根據 http://www.quirksmode.org/dom/w3c_css.html 跟 http://www.opera.com/docs/specs/js/dom/css/ ... 應該都不支援前提是你不想寫很多 css 檔不然有比較方便的方法可以做 ※ 引述《sniperliao ()》之銘言： : ※ 引述《abgne (abgne)》之銘言： : : 簡單的範例 : : <style type="text/css"> : :  : : </style> : : <script> : : function abgne(obj){ : : obj.className="b"; : : } : : </script> : : <SPAN class="a" onclick="abgne(this);">點我變換顏色</SPAN> : 感謝您回文，不過此方法不太適合我需要的效果 : 因為這僅僅是換 "點我變換顏色" 這行字的顏色(我應該沒有誤解吧QQ?) : 我的需求是，當我點下點我變化顏色 : 整篇文章(裡面的.a .b .c 是穿插使用且重複使用的，故id='xx'方法太過虛耗) : 都會變色，簡單的說，我要變化多種色彩風格 : 但是又不想多寫.css檔(因為某些因素)，所以不知道怎麼切換較好 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.112.30.52 ※ 編輯: TKirby 來自: 140.112.30.52 (02/21 16:54)