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)網頁樣式的實時切換，也就是"改變模板風格"。
首先需要賦予需要改變的目標一個id，如
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />
調用時很簡單，如
<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)網頁樣式的實時切換，也就是"改變模板風格"。
首先需要賦予需要改變的目標一個id，如
復制代碼 代碼如下:
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />
調用時很簡單，如
復制代碼 代碼如下:
<span onclick="javascript:document.getElementById('css').href='ie.css'">點我改變樣式</span>
相關文章
這篇文章主要為大家介紹了Web componentd組件內部事件回調示例及其痛點的剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2021-11-11
淺析JavaScript中l(wèi)et與const命令的區(qū)別
這篇文章主要為大家詳細介紹了JavaScript中l(wèi)et命令與const命令的用法及區(qū)別,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的可以參考下2023-09-09
這篇文章主要介紹了js改變文章字體大小的實例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了JS獲取下拉框顯示值和判斷單選按鈕的方法,實例分析了javascript針對html下拉框及單選按鈕的相關操作技巧,需要的朋友可以參考下2015-07-07
javascript讀取Xml文件做一個二級聯(lián)動菜單示例
這篇文章主要介紹了使用javascript中讀取Xml文件做成的一個二級聯(lián)動菜單,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)點擊生成隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
window.name代替cookie的實現(xiàn)代碼
window.name代替cookie的實現(xiàn)代碼，需要的朋友可以參考下。2010-11-11
web前端開發(fā)中常見的多列布局解決方案整理(一定要看)
多列布局在web前端開發(fā)中也是較為常見的，今天小編給大家介紹這里會提到的多列布局有兩列定寬加一列自適應、多列不定寬加一列自適應、多列等分三種，感興趣的朋友一起看看吧2017-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)單擊可修改表格，類似成績單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
mui的上拉加載和下拉刷新類似，都屬于pullRefresh插件。今天小編抽空給大家分享mui上拉加載更多下拉刷新數據的封裝過程，需要的朋友參考下吧2017-11-11