Javascript改變CSS樣式

Javascript改變CSS樣式

 改變CSS樣式分為局部和全域，下面為大家介紹下使用Javascript具體的實現，感興趣的朋友可以參考下

一、局部改變樣式 

 

有三種方法：直接改變樣式、改變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>