首頁猿問動(dòng)態(tài)替換css文件（并將新樣式應(yīng)用...

動(dòng)態(tài)替換css文件（并將新樣式應(yīng)用于頁面）

JavaScript Html/CSS JQuery

慕村225694 2019-08-31 10:50:58

我有一個(gè)頁面，<link>在標(biāo)題中加載了名為的CSS light.css。我還有一個(gè)名為的文件dark.css。我想要一個(gè)按鈕來交換頁面的樣式（css文件中有40個(gè)選擇器，有些在兩個(gè)文件中不匹配）。如何刪除對(duì)light.cssJS的引用并刪除所有應(yīng)用的樣式，然后dark.css從中加載并應(yīng)用所有樣式？我不能簡(jiǎn)單地重置所有元素，因?yàn)橐恍邮绞峭ㄟ^不同的css文件應(yīng)用的，有些是由JS動(dòng)態(tài)生成的。沒有重新加載頁面，有沒有一種簡(jiǎn)單而有效的方法呢？香草JS是首選，但我會(huì)使用jQuery進(jìn)行后續(xù)處理，所以jQ也沒關(guān)系。

查看完整描述

4 回答

qq_力學(xué)篤行_0

TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個(gè)贊

大佬你好,我想問下你之前做的react 后臺(tái)管理系統(tǒng) 有demo地址或者 github地址嗎我想?yún)⒖枷?不勝感激

反對(duì) 回復(fù) 2019-09-03

Qyouu

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊

您可以創(chuàng)建一個(gè)新鏈接，并用新鏈接替換舊鏈接。如果將它放在一個(gè)函數(shù)中，您可以在需要的地方重用它。

Javascript：

function changeCSS(cssFile, cssLinkIndex) {

var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

var newlink = document.createElement("link");

newlink.setAttribute("rel", "stylesheet");

newlink.setAttribute("type", "text/css");

newlink.setAttribute("href", cssFile);

document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);

}

HTML：

<html>

<head>

<title>Changing CSS</title>

</head>

<body>

<a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a>

<a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>

</body>

</html>

為簡(jiǎn)單起見，我使用了內(nèi)聯(lián)javascript。在制作中，您可能希望使用不顯眼的事件偵聽器。

反對(duì) 回復(fù) 2019-08-31

慕容708150

TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超4個(gè)贊

如果在link元素上設(shè)置ID

你可以用Javascript來定位它

document.getElementsByTagName('head')[0].getElementById('stylesheet').href='stylesheet2.css';

要不就..

document.getElementById('stylesheet').href='stylesheet2.css';

這是一個(gè)更徹底的例子：

<head>

function setStyleSheet(url){

var stylesheet = document.getElementById("stylesheet");

stylesheet.setAttribute('href', url);

}

</script>

</head>

<body>

<a onclick="setStyleSheet('stylesheet1.css')" href="#">Style 1</a>

<a onclick="setStyleSheet('stylesheet2.css')" href="#">Style 2</a>

</body>

反對(duì) 回復(fù) 2019-08-31

4 回答
1 關(guān)注
1439 瀏覽

關(guān)注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

動(dòng)態(tài)替換css文件（并將新樣式應(yīng)用于頁面）

動(dòng)態(tài)替換css文件（并將新樣式應(yīng)用于頁面）

4 回答

相關(guān)問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

動(dòng)態(tài)替換css文件（并將新樣式應(yīng)用于頁面）

動(dòng)態(tài)替換css文件（并將新樣式應(yīng)用于頁面）

4 回答

相關(guān)問題推薦

添加回答