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