用JavaScript動態(tài)建立或增加CSS樣式表的實現(xiàn)方法
更新時間：2016年05月20日 17:10:35 投稿：jingxian
下面小編就為大家?guī)硪黄肑avaScript動態(tài)建立或增加CSS樣式表的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
1、簡單的方法，不管不顧，直接這樣就可以：
document.createStyleSheet().cssText = '標簽{color:red;' +
// 這個注釋只在當前JS中幫助理解，并不會寫入CSS中
'width:300px;height:150px}' +
'.類名{……}' +
'#ID們{……}'
;
//完活。我喜歡分號這樣寫，和指令書寫的起始位置對齊比較好一點，尤其是后面有其它語句的時候。
2、完善一點的方法，防止重復添加，可以通過添加樣式表ID并對其判斷來實現(xiàn)：
if (!document.styleSheets['要建立的樣式表ID如theforever']) { //先檢查要建立的樣式表ID是否存在，防止重復添加
var ss = document.createStyleSheet();
ss.owningElement.id = '要建立的樣式表ID如theforever';
ss.cssText = '標簽{display:inline-block;overflow:hidden;' +
// 這個注釋只在當前JS中幫助理解，并不會寫入CSS中
'text-align:left;width:300px;height:150px}' +
'.類名{……}' +
'#ID們{……}'
;
}
以上這篇用JavaScript動態(tài)建立或增加CSS樣式表的實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js實現(xiàn)按鈕控制圖片360度翻轉特效的方法,涉及HTML5中canvas方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了微信小程序實現(xiàn)判斷是分享到群還是個人功能,結合實例形式分析了微信小程序分享與判斷功能的實現(xiàn)原理、步驟及相關操作技巧,需要的朋友可以參考下2019-05-05
JavaScript 中實現(xiàn) use strict的方法及優(yōu)勢
本教程將討論JavaScript中的use strict特性,在這里,我們將通過不同的示例了解如何在JavaScript代碼語句中創(chuàng)建和執(zhí)行use strict關鍵字,需要的朋友可以參考下2023-09-09
深入理解JavaScript系列（26）：設計模式之構造函數(shù)模式詳解
這篇文章主要介紹了深入理解JavaScript系列（26）：設計模式之構造函數(shù)模式詳解,本文講解了基本用法、構造函數(shù)與原型、只能用new嗎？、強制使用new、原始包裝函數(shù)等內(nèi)容,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)消息對話框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
本文主要介紹了webpack入門的一些簡單命令和基本配置信息，從代碼拆分、打包、壓縮的角度和傳統(tǒng)的前端項目進行對比，希望以此加深大家對webpack基礎知識的印象。下面跟著小編一起來看下吧2017-01-01
本文分享了基于JS實現(xiàn)的隨機數(shù)字抽簽的實例代碼。小編認為具很好的參考價值，感興趣的朋友可以看下2016-12-12
js操作時間（年-月-日 時-分-秒 星期幾）,需要的朋友可以參考下。2010-06-06
本文重點給大家介紹js判斷json對象是否為空的知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-07-07
JavaScript利用虛擬列表實現(xiàn)高性能渲染數(shù)據(jù)詳解
在前文中我們提到可以使用時間分片的方式來對長列表進行渲染，但這種方式更適用于列表項的DOM結構十分簡單的情況，所以本文來講講如何使用虛擬列表的方式，來同時加載大量數(shù)據(jù)吧2023-05-05