javascript修改css样式:局部与全局样式

发布时间:2020-02-29编辑:脚本学堂
有关javascript修改css样式的方法,这里介绍js改变局部样式的三种方法,以及js改变全局样式的的实例。

js改变css样式

一、改变局部样式

有三种方法:
直接改变样式、改变className和改变cssText

改变className:
 

document.getElementById('obj').className="…"

改变cssText:
 

document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";

改变直接样式:
 

document.getElementById('obj').style.backgroundColor="#003366″

二、改变全局样式

通过改变外链样式的的href的值实现网页样式的实时切换,也就是"改变模板风格"。

首先,赋予需要改变的目标一个id,例如:
 

<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />

调用:
 

<span onclick="javascript:document.getElementById('css').href='ie.css'">改变样式</span>