js代码改变CSS局部或全局样式的方法

发布时间:2020-10-29编辑:脚本学堂
我们知道,改变CSS样式分为局部样式与全局样式,本文为大家介绍用js代码改变css局部或全局样式的方法,感兴趣的朋友不妨参考下。

本节内容:
用js代码改变css样式,包括全局样式与局部样式。

一、局部改变样式
三种方法:直接改变样式、改变className和改变cssText

1,改变className:
 

复制代码 代码示例:
document.getElementById('obj').className="…"

2,改变cssText:
 

复制代码 代码示例:
document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";

3,改变直接样式:
 

复制代码 代码示例:
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>