用JavaScript動(dòng)態(tài)建立或增加CSS樣式表的實(shí)現(xiàn)方法

更新時(shí)間：2016年05月20日 17:10:35 投稿：jingxian

下面小編就為大家?guī)?lái)一篇用JavaScript動(dòng)態(tài)建立或增加CSS樣式表的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1、簡(jiǎn)單的方法，不管不顧，直接這樣就可以：

document.createStyleSheet().cssText = '標(biāo)簽{color:red;' +
    // 這個(gè)注釋只在當(dāng)前JS中幫助理解，并不會(huì)寫(xiě)入CSS中
    'width:300px;height:150px}' +
    '.類名{……}' +
    '#ID們{……}'
;

//完活。我喜歡分號(hào)這樣寫(xiě)，和指令書(shū)寫(xiě)的起始位置對(duì)齊比較好一點(diǎn)，尤其是后面有其它語(yǔ)句的時(shí)候。

2、完善一點(diǎn)的方法，防止重復(fù)添加，可以通過(guò)添加樣式表ID并對(duì)其判斷來(lái)實(shí)現(xiàn)：

if (!document.styleSheets['要建立的樣式表ID如theforever']) { //先檢查要建立的樣式表ID是否存在，防止重復(fù)添加
 var ss = document.createStyleSheet();
 ss.owningElement.id = '要建立的樣式表ID如theforever';
 ss.cssText = '標(biāo)簽{display:inline-block;overflow:hidden;' +
  // 這個(gè)注釋只在當(dāng)前JS中幫助理解，并不會(huì)寫(xiě)入CSS中
  'text-align:left;width:300px;height:150px}' +
  '.類名{……}' +
  '#ID們{……}'
 ;
 }

以上這篇用JavaScript動(dòng)態(tài)建立或增加CSS樣式表的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法,涉及HTML5中canvas方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
微信小程序?qū)崿F(xiàn)判斷是分享到群還是個(gè)人功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)判斷是分享到群還是個(gè)人功能,結(jié)合實(shí)例形式分析了微信小程序分享與判斷功能的實(shí)現(xiàn)原理、步驟及相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
JavaScript 中實(shí)現(xiàn) use strict的方法及優(yōu)勢(shì)
本教程將討論JavaScript中的use strict特性,在這里,我們將通過(guò)不同的示例了解如何在JavaScript代碼語(yǔ)句中創(chuàng)建和執(zhí)行use strict關(guān)鍵字,需要的朋友可以參考下
2023-09-09
深入理解JavaScript系列（26）：設(shè)計(jì)模式之構(gòu)造函數(shù)模式詳解
這篇文章主要介紹了深入理解JavaScript系列（26）：設(shè)計(jì)模式之構(gòu)造函數(shù)模式詳解,本文講解了基本用法、構(gòu)造函數(shù)與原型、只能用new嗎？、強(qiáng)制使用new、原始包裝函數(shù)等內(nèi)容,需要的朋友可以參考下
2015-03-03
JavaScript實(shí)現(xiàn)消息對(duì)話框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)消息對(duì)話框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-09-09
webpack入門(mén)必知必會(huì)
本文主要介紹了webpack入門(mén)的一些簡(jiǎn)單命令和基本配置信息，從代碼拆分、打包、壓縮的角度和傳統(tǒng)的前端項(xiàng)目進(jìn)行對(duì)比，希望以此加深大家對(duì)webpack基礎(chǔ)知識(shí)的印象。下面跟著小編一起來(lái)看下吧
2017-01-01
基于JS實(shí)現(xiàn)的隨機(jī)數(shù)字抽簽實(shí)例
本文分享了基于JS實(shí)現(xiàn)的隨機(jī)數(shù)字抽簽的實(shí)例代碼。小編認(rèn)為具很好的參考價(jià)值，感興趣的朋友可以看下
2016-12-12
js操作時(shí)間（年-月-日時(shí)-分-秒星期幾）
js操作時(shí)間（年-月-日時(shí)-分-秒星期幾）,需要的朋友可以參考下。
2010-06-06
JS如何判斷json是否為空
本文重點(diǎn)給大家介紹js判斷json對(duì)象是否為空的知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-07-07
JavaScript利用虛擬列表實(shí)現(xiàn)高性能渲染數(shù)據(jù)詳解
在前文中我們提到可以使用時(shí)間分片的方式來(lái)對(duì)長(zhǎng)列表進(jìn)行渲染，但這種方式更適用于列表項(xiàng)的DOM結(jié)構(gòu)十分簡(jiǎn)單的情況，所以本文來(lái)講講如何使用虛擬列表的方式，來(lái)同時(shí)加載大量數(shù)據(jù)吧
2023-05-05