色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

動態(tài)替換css文件(并將新樣式應用于頁面)

CSS
錢淋西1年前8瀏覽0評論

我有一頁上面有& ltlink & gt在加載名為light.css的css的標題中。我還有一個名為dark.css的文件。我想要一個按鈕來一起交換頁面的樣式(CSS文件中使用了40個選擇器，有些在兩個文件中不匹配)。

我如何用JS刪除對light.css的引用并刪除所有應用的樣式，然后加載dark.css并應用其中的所有樣式？我不能簡單地重置所有的元素，因為有些樣式是通過不同的css文件應用的，有些是由JS動態(tài)生成的。有沒有一種簡單而有效的方法可以做到這一點，而無需重新加載頁面？普通的JS更好，但是我會使用jQuery進行后續(xù)處理，所以jQ也很好。

# # #您可以在文檔中包含所有樣式表，然后根據(jù)需要激活/停用它們。

根據(jù)我對規(guī)范的理解，您應該能夠通過將禁用屬性從true更改為false來激活替代樣式表，但是似乎只有Firefox能夠正確地做到這一點。

所以我認為你有幾個選擇:

切換rel =替代

<link rel="stylesheet"           href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css"  id="dark"  title="Dark">

<script>
function enableStylesheet (node) {
  node.rel = 'stylesheet';
}

function disableStylesheet (node) {
  node.rel = 'alternate stylesheet';
}
</script>

禁用設(shè)置和切換

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css"  id="dark"  class="alternate">

<script>
function enableStylesheet (node) {
  node.disabled = false;
}

function disableStylesheet (node) {
  node.disabled = true;
}

document
  .querySelectorAll('link[rel=stylesheet].alternate')
  .forEach(disableStylesheet);
</script>

切換媒體=無

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css"  media="none" id="dark">

<script>
function enableStylesheet (node) {
  node.media = '';
}

function disableStylesheet (node) {
  node.media = 'none';
}
</script>

可以用getElementById、querySelector等選擇樣式表節(jié)點。

(避免不標準的& lt鏈接被禁用& gt。不過，設(shè)置HTMLLinkElement#disabled也沒問題。)

# # #您可以創(chuàng)建一個新鏈接，并用新鏈接替換舊鏈接。如果你把它放在一個函數(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(cssLinkIndex).replaceChild(newlink, oldlink);
}

HTML:

<html>
    <head>
        <title>Changing CSS</title>
        <link rel="stylesheet" type="text/css" href="positive.css"/>
    </head>
    <body>
        <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> 
        <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
    </body>
</html>

為了簡單起見，我使用了內(nèi)聯(lián)javascript。在生產(chǎn)中，您可能希望使用不引人注目的事件偵聽器。

# # #如果在鏈接元素上設(shè)置了ID

<link rel="stylesheet" id="stylesheet" href="stylesheet1.css"/>

你可以用Javascript來定位它

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

或者只是..

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

這里有一個更徹底的例子:

<head>
    <script>
    function setStyleSheet(url){
       var stylesheet = document.getElementById("stylesheet");
       stylesheet.setAttribute('href', url);
    }
    </script>

    <link id="stylesheet" rel="stylesheet" type="text/css" href="stylesheet1.css"/>
</head>
<body>
    <a onclick="setStyleSheet('stylesheet1.css')" href="#">Style 1</a>
    <a onclick="setStyleSheet('stylesheet2.css')" href="#">Style 2</a>
</body>

# # #這個問題很老了，但是我建議一個這里沒有提到的方法，在這個方法中，你將在HTML中包含兩個CSS文件，但是CSS將是這樣的

light.css

/*** light.css ***/

p.main{
   color: #222;
}

/*** other light CSS ***/

dark.css將會是這樣的

/*** dark.css ***/
 
.dark_theme p.main{
   color: #fff;
   background-color: #222;
}

/*** other dark CSS ***/

css中的每個選擇器都將是。黑暗_主題

如果有人選擇改變網(wǎng)站的主題，那么你需要做的就是改變body元素的類。

$("#changetheme").click(function(){
   $("body").toggleClass("dark_theme");
});

現(xiàn)在，一旦用戶點擊#changetheme，所有的元素都將擁有黑色的css。如果你使用任何類型的CSS預處理程序，這是很容易做到的。

你也可以為背景和顏色添加CSS動畫，使過渡非常平滑。

# # #使用jquery，您肯定可以交換css文件。點擊按鈕時執(zhí)行此操作。

var cssLink = $('link[href*="light.css"]');
cssLink.replaceWith('<link href="dark.css" type="text/css" rel="stylesheet">');

或者按照山姆的回答，那也行。下面是jquery語法。

$('link[href*="light.css"]').prop('disabled', true);
$('link[href*="dark.css"]').prop('disabled', false);

# # #使用jquery。attr()你可以設(shè)置鏈接標簽的href

示例代碼

$("#yourButtonId").on('click',function(){
   $("link").attr(href,yourCssUrl);
});

# # #也許我想得太復雜了，但既然公認的答案對我不起作用，我想我也應該分享一下我的解決方案。

故事: 我想做的是在頁面的頭部包含不同的“皮膚”作為附加的樣式表，添加到“主”樣式中，并通過按頁面上的按鈕切換它們(沒有瀏覽器設(shè)置或其他東西)。

問題: 我認為@sam的解決方案非常優(yōu)雅，但對我來說根本不起作用。至少部分問題是我使用了一個主CSS文件，并在上面添加了其他文件作為“皮膚”,因此我不得不將缺少“標題”屬性的文件分組。

這是我想到的。 首先使用“替換”將所有“皮膚”添加到頭部:

<link rel="stylesheet" href="css/main.css" title='main'>
<link rel="stylesheet alternate" href="css/skin1.css" class='style-skin' title=''>
<link rel="stylesheet alternate" href="css/skin2.css" class='style-skin' title=''>
<link rel="stylesheet alternate" href="css/skin3.css" class='style-skin' title=''>

請注意，我給了主CSS文件title='main ',而所有其他文件都有一個class='style-skin '而沒有標題。 為了切換皮膚，我使用jQuery。我讓純粹主義者去尋找優(yōu)雅的香草版本:

var activeSkin = 0;    
$('#myButton').on('click', function(){
    var skins = $('.style-skin');
    if (activeSkin > skins.length) activeSkin=0;
    skins.each(function(index){
        if (index === activeSkin){
            $(this).prop('title', 'main');
            $(this).prop('disabled', false);
        }else{
            $(this).prop('title', '');
            $(this).prop('disabled', true);
        }
    });
    activeSkin++
});

它所做的是遍歷所有可用的皮膚，獲取(很快)激活的皮膚，將標題設(shè)置為“main”并激活它。所有其他皮膚被禁用，標題被刪除。

# # #只需將鏈接href屬性更新到新的css文件中。

function setStyleSheet(fileName){
       document.getElementById("WhatEverYouAssignIdToStyleSheet").setAttribute('href', fileName);
    }

# # #我修改了lampe的示例，您可以通過以下方式使用選擇器添加一個類: 首先將該類應用于javascript中的特定選擇器(對于特定的元素選擇器(在我的HTML中)，根據(jù)需要重復多次):

$("p:nth-of-type(even)").toggleClass("main mainswitch");

然后html看起來像這樣

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> 
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
         $(".mainswitch").toggleClass("main");
  });
});
</script>
<style>
.main {
    font-size: 120%;
    color: red;
  }
 </style>
 </head>
 <body>
<div>
 <p>This is a paragraph.</p>
 <p class="main mainswitch">This is another paragraph.</p>
 <p>This is a paragraph.</p>
 <p>This is a paragraph.</p>
 <p>This is a paragraph.</p>
 </div>
 <button>Toggle class "main" for p elements</button>

 </body>
</html>

# # #如果你用的是Angular(因為現(xiàn)在已經(jīng)不是2013年了)，可以試試這里的答案/解決方案/建議:

如何在點擊事件中改變目標CSS文件

它對我起了作用。

# # #我知道這不是最好的解決方案，但你也可以這樣做:

<head>
<link href="//awesome-style-sunny.css" rel="stylesheet" id="default-style"></link>
<link href="//awesome-style-sunny.css" rel="stylesheet" id="themed-style"></link>
</head>

正如你所看到的，相同的風格被加載了兩次，這有助于你切換第二種風格的href，你的用戶不會看到一個沒有任何風格的赤裸裸的網(wǎng)站。

風格的順序很重要，因為后一種風格會優(yōu)先于前一種風格。然后我們可以像大多數(shù)答案中提到的那樣做一些事情:

const changeTheme = (theme) => {
  if (document.getElementById("themed-style")) {
    document.getElementById("themed-style").href = theme
    localStorage.setItem("user-theme", theme);
  }
}