js動態配置css（動態加載js）

本文目錄一覽：

• 1、JS 怎麼動態設置CSS3動畫的樣式
• 2、HTML JS動態設置CSS樣式
• 3、如何實現JavaScript動態加載CSS和JS文件
• 4、如何實現JS動態修改css全局樣式
• 5、vue.js怎麼動態設置css
• 6、JS 動態修改CSS 樣式方法/全局

JS 怎麼動態設置CSS3動畫的樣式

像這種效果，你要想知道，

已經下載下來，你拆開看一下就知道了。

說說原理，這裡並不是純css3，，只是用css3定義好動畫，

@-moz-keyframes tips {

0% {box-shadow: 0px 0px 0px #f00;}

25% {box-shadow: 0px 0px 8px #f00;}

50% {box-shadow: 0px 0px 0px #f00;}

100% {box-shadow: 0px 0px 8px #f00;}

}

然後，js在切屏後，用Js來觸發這一個樣式，這個樣式調用了剛才定義的動畫。

.tips {

-webkit-animation:tips 1s;

-moz-animation:tips 1s ;

}

當然css3是可以做的，只是用純css3，就沒辦法像這樣可以拖動切屏，這個是需要js或者jq來完成。。。

~如果你認可我的回答，請及時點擊【採納為滿意回答】按鈕

~~手機提問的朋友在客戶端右上角評價點【滿意】即可。

~你的採納是我前進的動力

~~O(∩_∩)O，記得好評和採納，互相幫助，謝謝。

HTML JS動態設置CSS樣式

我估么着缺點就是吃飽了撐的，沒事就別用js設置CSS，還有啊一般來說，修改少量CSS可以直接修改就是document.getElementById(‘id’).style.color=”#f00″;大量修改是改變元素的class名稱來實現的。

如何實現JavaScript動態加載CSS和JS文件

代碼：

var dynamicLoading = {

css: function(path){

if(!path || path.length === 0){

throw new Error(‘argument “path” is required !’);

}

var head = document.getElementsByTagName(‘head’)[0];

var link = document.createElement(‘link’);

link.href = path;

link.rel = ‘stylesheet’;

link.type = ‘text/css’;

head.appendChild(link);

},

js: function(path){

if(!path || path.length === 0){

throw new Error(‘argument “path” is required !’);

}

var head = document.getElementsByTagName(‘head’)[0];

var script = document.createElement(‘script’);

script.src = path;

script.type = ‘text/javascript’;

head.appendChild(script);

}

}

對象包含兩個完全獨立的方法，分別用來加載CSS 文件和JS 文件，參數均為欲加載的文件路徑。原理非常的簡單：對於不同的加載文件類型創建不同的節點，然後添加各自的屬性，最後扔到head 標籤裡面。經測試，本方法兼容各瀏覽器，安全、無毒、環保，是 web 開發人員工作常備代碼。

下面是調用代碼，異常簡單：

//動態加載 CSS 文件

dynamicLoading.css(“test.css”);

//動態加載 JS 文件

dynamicLoading.js(“test.js”);

如何實現JS動態修改css全局樣式

用css樣式相關的接口 stylesheet.insertRule或者stylesheet.addRule 這兩個都可以動態插入css樣式 兼容性還可以 ie9+

比如

myStyle.insertRule(“#blanc { color: white }”, 0);

需要刪除的時候還有deleteRule和removeRule兩個方法

vue.js怎麼動態設置css

template

ul

li v-for=”tab in tabs” :class=”{ ‘is-active’: tab.isSelected}”

a :href=”tab.href” @click=”selectTab(tab)”{{tab.name}}/a

/li

/ul

script

selectTab(selectedTab) {

this.tabs.forEach(tab = {

tab.isSelected = (tab.name == selectedTab.name);

})

}

給每個a標籤綁定一個方法，並傳入當前對象作為參數

當點擊時遍歷所有a標籤，比較當前遍歷對象的某個屬性（例子中的name)與傳入對象的某個屬性

比例結果賦值給一個flag（例子中的isSelected屬性）,由這個flag去控制：class

從而實現數據驅動樣式

JS 動態修改CSS 樣式方法/全局

如何配置自行百度

1.scss文件定義變量

2.js中更改$textColor 變量的值

都是獲取DOM

通過DOM分別修改當前DOM樣式屬性值、

當前DOM整體css樣式、

修改當前DOM的className類名、

將link引入的標籤作為DOM 修改link的href，從而修改引用的樣式表。

詳情轉自：