快捷導(dǎo)航

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)頁樣式的實(shí)時(shí)切換，也就是"改變模板風(fēng)格"。

首先需要賦予需要改變的目標(biāo)一個(gè)id，如

復(fù)制代碼代碼如下:

調(diào)用時(shí)很簡單，如

復(fù)制代碼代碼如下:

 
<span onclick="javascript:document.getElementById('css').href='ie.css'">點(diǎn)我改變樣式</span> 

您可能感興趣的文章:

相關(guān)文章

Web componentd組件內(nèi)部事件回調(diào)及痛點(diǎn)剖析
這篇文章主要為大家介紹了Web componentd組件內(nèi)部事件回調(diào)示例及其痛點(diǎn)的剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2021-11-11
淺析JavaScript中l(wèi)et與const命令的區(qū)別
這篇文章主要為大家詳細(xì)介紹了JavaScript中l(wèi)et命令與const命令的用法及區(qū)別,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考下
2023-09-09
js改變文章字體大小的實(shí)例代碼
這篇文章主要介紹了js改變文章字體大小的實(shí)例代碼，有需要的朋友可以參考一下
2013-11-11
JS獲取下拉框顯示值和判斷單選按鈕的方法
這篇文章主要介紹了JS獲取下拉框顯示值和判斷單選按鈕的方法,實(shí)例分析了javascript針對html下拉框及單選按鈕的相關(guān)操作技巧,需要的朋友可以參考下
2015-07-07
javascript讀取Xml文件做一個(gè)二級聯(lián)動菜單示例
這篇文章主要介紹了使用javascript中讀取Xml文件做成的一個(gè)二級聯(lián)動菜單,需要的朋友可以參考下
2014-03-03
微信小程序?qū)崿F(xiàn)點(diǎn)擊生成隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊生成隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
window.name代替cookie的實(shí)現(xiàn)代碼
window.name代替cookie的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-11-11
web前端開發(fā)中常見的多列布局解決方案整理(一定要看)
多列布局在web前端開發(fā)中也是較為常見的，今天小編給大家介紹這里會提到的多列布局有兩列定寬加一列自適應(yīng)、多列不定寬加一列自適應(yīng)、多列等分三種，感興趣的朋友一起看看吧
2017-10-10
js實(shí)現(xiàn)單擊可修改表格
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)單擊可修改表格，類似成績單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
mui上拉加載更多下拉刷新數(shù)據(jù)的封裝過程
mui的上拉加載和下拉刷新類似，都屬于pullRefresh插件。今天小編抽空給大家分享mui上拉加載更多下拉刷新數(shù)據(jù)的封裝過程，需要的朋友參考下吧
2017-11-11