JavaScript動(dòng)態(tài)插入CSS的方法
寫組件時(shí)有時(shí)想把一些組件特性相關(guān)的 CSS 樣式封裝在 JS 里,這樣更內(nèi)聚,改起來方便。JS 動(dòng)態(tài)插入 CSS 兩個(gè)步驟:創(chuàng)建1、一個(gè) style 對(duì)象
2、使用 stylesheet 的 insertRule 或 addRule 方法添加樣式
一、查看樣式表
先看下 document.styleSheets,隨意打開一個(gè)頁(yè)面
其中前三個(gè)是通過 link 標(biāo)簽引入的 CSS 文件,第四個(gè)是通過 style 標(biāo)簽內(nèi)聯(lián)在頁(yè)面里的 CSS。有如下屬性
每一個(gè) cssRule 又有如下屬性
其中的 cssText 正是寫在 style 的源碼。
二、動(dòng)態(tài)插入 CSS
首先,需要?jiǎng)?chuàng)建一個(gè) style 對(duì)象,返回其 stylesheet 對(duì)象
/* * 創(chuàng)建一個(gè) style, 返回其 stylesheet 對(duì)象 * 注意:IE6/7/8中使用 style.stylesheet,其它瀏覽器 style.sheet */ function createStyleSheet() { var head = document.head || document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; head.appendChild(style); return style.sheet ||style.styleSheet; }
添加函數(shù) addCssRule 如下
/* * 動(dòng)態(tài)添加 CSS 樣式 * @param selector {string} 選擇器 * @param rules {string} CSS樣式規(guī)則 * @param index {number} 插入規(guī)則的位置, 靠后的規(guī)則會(huì)覆蓋靠前的 */ function addCssRule(selector, rules, index) { index = index || 0; if (sheet.insertRule) { sheet.insertRule(selector + "{" + rules + "}", index); } else if (sheet.addRule) { sheet.addRule(selector, rules, index); } }
需要注意,標(biāo)準(zhǔn)瀏覽器支持 insertRule, IE低版本則支持 addRule。
完整代碼如下
/* * 動(dòng)態(tài)添加 CSS 樣式 * @param selector {string} 選擇器 * @param rules {string} CSS樣式規(guī)則 * @param index {number} 插入規(guī)則的位置, 靠后的規(guī)則會(huì)覆蓋靠前的 */ var addCssRule = function() { // 創(chuàng)建一個(gè) style, 返回其 stylesheet 對(duì)象 // 注意:IE6/7/8中使用 style.stylesheet,其它瀏覽器 style.sheet function createStyleSheet() { var head = document.head || document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; head.appendChild(style); return style.sheet ||style.styleSheet; } // 創(chuàng)建 stylesheet 對(duì)象 var sheet = createStyleSheet(); // 返回接口函數(shù) return function(selector, rules, index) { index = index || 0; if (sheet.insertRule) { sheet.insertRule(selector + "{" + rules + "}", index); } else if (sheet.addRule) { sheet.addRule(selector, rules, index); } } }();
如果只支持移動(dòng)端或現(xiàn)代瀏覽器,可以去掉低版本IE判斷的代碼
/* * 動(dòng)態(tài)添加 CSS 樣式 * @param selector {string} 選擇器 * @param rules {string} CSS樣式規(guī)則 * @param index {number} 插入規(guī)則的位置, 靠后的規(guī)則會(huì)覆蓋靠前的,默認(rèn)在后面插入 */ var addCssRule = function() { // 創(chuàng)建一個(gè) style, 返回其 stylesheet 對(duì)象 function createStyleSheet() { var style = document.createElement('style'); style.type = 'text/css'; document.head.appendChild(style); return style.sheet; } // 創(chuàng)建 stylesheet 對(duì)象 var sheet = createStyleSheet(); // 返回接口函數(shù) return function(selector, rules, index) { index = index || 0; sheet.insertRule(selector + "{" + rules + "}", index); } }();
以上就是JavaScript動(dòng)態(tài)插入CSS的方法,希望對(duì)大家的學(xué)習(xí)有所幫助。
- 深入理解javascript動(dòng)態(tài)插入技術(shù)
- JavaScript動(dòng)態(tài)插入script的基本思路及實(shí)現(xiàn)函數(shù)
- 得到文本框選中的文字,動(dòng)態(tài)插入文字的js代碼
- 如何讓動(dòng)態(tài)插入的javascript腳本代碼跑起來。
- Javascript基于AJAX回調(diào)函數(shù)傳遞參數(shù)實(shí)例分析
- js自定義回調(diào)函數(shù)
- 談?wù)凧avaScript自定義回調(diào)函數(shù)
- js的回調(diào)函數(shù)詳解
- 告訴你什么是javascript的回調(diào)函數(shù)
- js中回調(diào)函數(shù)的學(xué)習(xí)筆記
- JS動(dòng)態(tài)插入并立即執(zhí)行回調(diào)函數(shù)的方法
相關(guān)文章
js 解析 JSON 數(shù)據(jù)簡(jiǎn)單示例
這篇文章主要介紹了js 解析 JSON 數(shù)據(jù)的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了js 解析 JSON 格式數(shù)據(jù)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-04-04javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
常用的頁(yè)面效果有彈出層效果,無縫滾動(dòng)效果,選項(xiàng)卡切換效果,接下來與大家分享一款自己用原生javascript寫的選項(xiàng)卡切換效果,感興趣的朋友可以參考下哈2013-03-03基于JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加刪除表格的行
又一個(gè)動(dòng)態(tài)控制表格的效果,用JavaScript動(dòng)態(tài)生成表格行、表格列,以及還可動(dòng)態(tài)刪除這些行列,行等,運(yùn)行代碼后,點(diǎn)擊對(duì)應(yīng)的功能按鈕,即可實(shí)現(xiàn)對(duì)應(yīng)的表格操作功能,接下來通過代碼實(shí)例給大家介紹JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加刪除表格的行,需要的朋友參考下2016-02-02JavaScript 開發(fā)規(guī)范要求(圖文并茂)
作為一名開發(fā)人員(WEB前端JavaScript開發(fā)),不規(guī)范的開發(fā)不僅使日后代碼維護(hù)變的困難,同時(shí)也不利于團(tuán)隊(duì)的合作,通常還會(huì)帶來代碼安全以及執(zhí)行效率上的問題。2010-06-06基于JavaScript實(shí)現(xiàn)百度搜索框效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)百度搜索框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決
這篇文章主要為大家介紹了H5如何實(shí)現(xiàn)喚起APP及調(diào)試bug解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05es6數(shù)組之?dāng)U展運(yùn)算符操作實(shí)例分析
這篇文章主要介紹了es6數(shù)組之?dāng)U展運(yùn)算符操作,結(jié)合實(shí)例形式總結(jié)分析es6數(shù)組擴(kuò)展運(yùn)算符具體原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04微信小程序分享功能之按鈕button 邊框隱藏和點(diǎn)擊隱藏
這篇文章主要介紹了微信小程序分享功能之按鈕button 邊框隱藏和點(diǎn)擊隱藏,需要的朋友可以參考下2018-06-06