您的位置:首页 > Web前端 > JavaScript

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

2015-12-12 20:19 639 查看
一、局部改变样式 
分为改变直接样式,改变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”,也许会对你的疑惑有所帮助。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: