Keyword feuert benutzerdefiniertes CSS?

Question

Ich habe meine Website, die Bootstrap 3 Custom Theme verwendet. Ich frage mich, ob es möglich ist, einen kleinen CSS-Trick hinzuzufügen. Was ich tun möchte, ist ein kleines CSS-Snippet, das auf einem Keyword (tron) in der Tastatur eines Benutzers ausgeführt wird. Ich bin mir ziemlich sicher, dass es dafür einen JS-Keyboard-Listener gibt. Aber ist es möglich, dass wenn ich TRON auf meiner Website eintrage, könnte es einen temporären CSS-Code wie folgt auslösen, bis die Seite aktualisiert wird?

.btn-primary, .btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:active:hover, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:active:focus { 
    border-color: #60b6ff; 
    color: #60b6ff; 
    box-shadow: inset 0px 0px 2px #0F90FB, 0px 0px 4px #0F90FB; 
    -moz-box-shadow: inset 0px 0px 2px #0F90FB, 0px 0px 4px #0F90FB; 
    -webkit-box-shadow: inset 0px 0px 2px #0F90FB, 0px 0px 4px #0F90FB; 
    transition-duration: 0.5s; 
} 

.btn-primary:hover, .btn-primary:active:hover { 
    border-color: #BCE1FF; 
    box-shadow: inset 0px 0px 6px #0F90FB, 0px 0px 12px #0F90FB; 
    -moz-box-shadow: inset 0px 0px 6px #0F90FB, 0px 0px 12px #0F90FB; 
    -webkit-box-shadow: inset 0px 0px 6px #0F90FB, 0px 0px 12px #0F90FB; 
    color: #BCE1FF; 
    text-shadow: 0px 0px 12px #0F90FB; 
} 

.btn-primary:active, .btn-primary:focus, .btn-primary:active:focus, .open > .dropdown-toggle.btn-primary, .open > .dropdown-toggle.btn-primary.focus, .open > .dropdown-toggle.btn-primary:focus, .open > .dropdown-toggle.btn-primary:hover { 
    color: #0F90FB; 
    border-color: #0F90FB; 
    outline: 0px; 
} 

Answer 1

Sicher werde ich jquery verwenden, um die Dinge ein bisschen einfacher zu machen.

In meinem Beispiel habe ich einen CSS-Klassennamen von 'tron' erstellt, der sich im CSS-Sheet für die Site befindet. Wenn Sie spezifischere Elemente wünschen, können Sie sie zum Kind des Körperelements mit tron ​​als Klasse machen. In meinem Beispiel wird nur der Hintergrund des Körpers blau gesetzt, aber Sie können auch mit den CSS-Regeln machen, was Sie wollen.

In diesem Fall müssen Sie nur auf das Ereignis "keyup" achten. Wenn Sie vier Buchstaben mit der Schreibweise "tron" nacheinander eingeben, ändern Sie die Körperklasse in "tron". Ich habe es so, dass es weiter feuert, nachdem tron ​​eingestellt wurde (also werden die nächsten vier eingegebenen Buchstaben zurückgesetzt), aber wenn das nicht das Verhalten ist, das du willst, sollte dir das die allgemeine Idee geben.

Hier ist die JS, und ich habe einen Link zur vollständigen Plunker:

$(function(){ 
    var tron = ''; 
    $('body').on('keyup', function(e){ 
    tron += String.fromCharCode(e.keyCode); 
    if(tron.length == 4){ 
     if(tron === 'TRON'){ 
     $('body').addClass('tron'); 

     }else{ 
     if($('body').hasClass('tron')){ 
      $('body').removeClass('tron'); 
     } 
     tron = ''; 
     } 
    } 
    }) 
}) 

Die plunkr ist hier: https://plnkr.co/edit/KAVRlJo7C7Bao1LBIQDz

Answer 2

Heres ein Beispiel nur ein CSS-Blatt mit Ihrem neuen CSS machen und ersetzen link.href = 'newcss.css' mit dem Link zu Ihrem Stylesheet.

var tronstr = '' 
    function tron(e){ 
    switch (e.key) { 
     case "t": 
     if(tronstr.length == 0){ 
      tronstr = 't' 
     } 
     break; 
     case "r": 
     if(tronstr.length == 1){ 
      tronstr = 'tr' 
     }else{ 
      tronstr = '' 
     } 
     break; 
     case "o": 
     if(tronstr.length == 2){ 
      tronstr = 'tro' 
     }else{ 
      tronstr = '' 
     } 
     break; 
     case "n": 
     if(tronstr.length == 3){ 
      tronstr = 'tron' 
     }else{ 
      tronstr = '' 
     } 
     break; 
     default: 
     tronstr = '' 
    } 
    if(tronstr == 'tron'){ 
     var head = document.head, link = document.createElement('link') 
     link.type = 'text/css' 
     link.rel = 'stylesheet' 
     link.href = 'newcss.css' 
     head.appendChild(link) 

    } 
    console.log(tronstr); 
    }