CSSスタイルの切り替え

リファレンスコードを実装:https://highlightjs.org/

タグを無効リンクに基づいて原則、。

デモコード:

index.htmlを

<!DOCTYPE /> 
<HTML> 
<HEAD> 
    <メタのcharset = "UTF-8"> 
    <タイトル>のsetTimeout </ TITLE> 
    <リンククラス= "codestyle"のrel = "先読み代替スタイルシート"のhref =」./ C1。 CSS "> 
    <リンククラス=" codestyle "のrel = "先読み代替スタイルシート"のhref =" ./ c2.css "> 
    ます。<script type =" text / javascriptの"> 
        //リンク切换
        VARのスタイル= C1 ''; 
        機能initSnippet(){ 
            ()document.querySelectorAll( 'codestyle'のリンクを聞かせて){ため
                link.rel = 'スタイルシート'。
                !link.disabled = link.href.match(スタイル+ '\\ CSSの$。');

        setTimeout(関数(){
            スタイル=「C2」。
            initSnippet(); 
        }、1000)
    </ SCRIPT> 
</ head> 
<body> 
    <divのスタイル= "幅:100ピクセル、高さ100ピクセル;"> </ div> 
</ body> 
</ HTML>

c1.css

DIV { 
    背景色:#F00。
}

c2.css

DIV { 
    背景色:#0F0。
}

  

  

  

 

おすすめ

転載: www.cnblogs.com/xunhanliu/p/11809778.html