Javascript改變CSS樣式(局部和全局)
更新時間：2013年12月18日 17:02:08 作者：
改變CSS樣式分為局部和全局，下面為大家介紹下使用Javascript具體的實現(xiàn)，感興趣的朋友可以參考下
一、局部改變樣式
有三種方法：直接改變樣式、改變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的值實現(xiàn)網(wǎng)頁樣式的實時切換，也就是"改變模板風(fēng)格"。
首先需要賦予需要改變的目標一個id，如
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />
調(diào)用時很簡單，如
<span onclick="javascript:document.getElementById('css').href='ie.css'">點我改變樣式</span>
有三種方法：直接改變樣式、改變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的值實現(xiàn)網(wǎng)頁樣式的實時切換，也就是"改變模板風(fēng)格"。
首先需要賦予需要改變的目標一個id，如
復(fù)制代碼 代碼如下:
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />
調(diào)用時很簡單，如
復(fù)制代碼 代碼如下:
<span onclick="javascript:document.getElementById('css').href='ie.css'">點我改變樣式</span>
相關(guān)文章
這篇文章主要介紹了小程序跨頁面交互的作用與方法詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
JavaScript動態(tài)操作表格實例(添加,刪除行,列及單元格)
這篇文章主要是對JavaScript動態(tài)操作表格實例(添加,刪除行,列及單元格)進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
眾所周知,JSON.parse方法用于將一個json字符串轉(zhuǎn)換成由字符串描述的?JavaScript?值或?qū)ο?本文主要為大家介紹了JSON.parse方法的使用,需要的可以參考下2024-04-04
這篇文章主要介紹了JS常用跨域方法實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-12-12
CocosCreator入門教程之網(wǎng)絡(luò)通信
這篇文章主要介紹了CocosCreator的網(wǎng)絡(luò)通信,內(nèi)容不多，涉及到的細節(jié)，讀者可以根據(jù)實際情況，自己去延申2021-04-04
JavaScript實現(xiàn)多個重疊層點擊切換效果的方法
這篇文章主要介紹了JavaScript實現(xiàn)多個重疊層點擊切換效果的方法,實例分析了javascript實現(xiàn)點擊切換效果的相關(guān)技巧,需要的朋友可以參考下2015-04-04
這篇文章給大家詳細介紹了electron 如何獲取位置坐標信息,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
使用Axios函數(shù)庫進行網(wǎng)絡(luò)請求的操作指南
在現(xiàn)代的前端開發(fā)中,API調(diào)用是實現(xiàn)前后端數(shù)據(jù)交互的重要環(huán)節(jié),而在眾多的HTTP庫中,Axios以其簡潔的語法、豐富的功能和易于擴展的特性,成為了開發(fā)者的首選,本篇文章將深入介紹Axios的使用方法,2024-11-11
這篇文章通過實例代碼給大家介紹了微信小程序?qū)崿F(xiàn)滾動加載更多，給大家提供了完整代碼,需要的朋友可以參考下2019-12-12
獲取元素和鼠標的位置（兼容IE6.0,IE7.0,IE8.0,FireFox2.0,FireFox3.5,Opera），該功能是我一同事鉆研出來的，目標是為了實現(xiàn)與QQ自定義布局和拖放模塊類似的功能。2009-12-12