作者TKirby ( ^-^)
看板Web_Design
标题Re: [问题] 请教 "利用JavaScript与CSS，变换字色"
时间Tue Feb 21 16:53:12 2006
真的要玩弄 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">
: : <!--
: : .a {color: #009900;}
: : .b {color: #993333;}
: : .c {color: #3366CC;}
: : -->
: : </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)
1F：推 sniperliao:是的，小弟已经解决问题，用的是上述方法2 02/21 17:17