转：js改变样式的方式

JavaScript修改css中style,classname,cssText实例  

2011-03-02 15:33:52|  分类： Web重构|字号 订阅

 

 

一、局部改变样式 
分为改变直接样式，改变className和改变cssText三种。需要注意的是： 
注意大小写： 
javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“

t”，否则无法实现效果。 
调用方法： 
如果改变className，则事先在样式表中申明类，但调用时不要再跟style，像

document.getElementById('obj').style.className=”…”的写法是错误的！只能写成：

document.getElementById('obj').className=”…” 
改变cssText 
但是如果用cssText的话，必须加上style，正确的写法是：document.getElementById

('obj').style.cssText=”…”

改变直接样式我就不必说了，大家记得要写到具体样式即可，如 
document.getElementById('obj').style.backgroundColor=”#003366″

 

二、全局改变样式 
通常情况下，我们可以通过改变外链样式的的href的值实现网页样式的实时切换，也就是“改变模板

风格”。这时候我们首先需要赋予需要改变的目标一个id，如

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" /> 
调用时很简单，如：
<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式

</span> 
对于新人往往不知道CSS具体样式在javascript怎么写，而且有时候在不同浏览器中要求也不一样。如

float在IE中写成styleFloat，在FIREFOX中写成cssFloat，这就需要大家的积累了。在google中搜索

“ccvita javascript”，也许会对你的疑惑有所帮助。