Javascript If/Else & setAttribute

Question

Как раз в голову, я очень начинаю, поэтому, слишком много думая о том, почему я делаю то, что я делаю этим способом, я просто хотел прояснить это Я просто тренируюсь и пытаюсь понять, что могу и чего не могу, писать функции и использовать методы. Конечно, я открыт для предложения, я просто не хочу, чтобы кто-то слишком сильно зацепился за то, что я делаю что-то в том, что может быть не лучшим образом. На вопрос.

Таким образом, я пытаюсь написать JS для обмена CSS-файлами для изменения тем на веб-сайте.

Вот HTML:

<div onclick="swapStyleSheet('css/styles-black.css')" class="onoffswitch"> 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
    <label class="onoffswitch-label" for="myonoffswitch"></label> 
</div> 

Следующий код, кажется, работает:

function swapStyleSheet(sheet){ 
    if (document.getElementById('pagestyle').getAttribute('href') == "css/styles-white.css") { 
    document.getElementById('pagestyle').setAttribute('href', "css/styles-black.css"); 
    } 
} 

Замечу, что это работает установлен ли я "CSS/стили-black.css" напрямую или передать аргумент через вызов функции (как видно из HTML).

Для переключения из стилей-black.css стили-white.css, я добавил заявление еще:

function swapStyleSheet(sheet){ 
    if (document.getElementById('pagestyle').getAttribute('href') == "css/styles-white.css") { 
    document.getElementById('pagestyle').setAttribute('href', "css/styles-black.css"); 
    } else { 
    document.getElementById('pagestyle').setAttribute('href', "css/styles-white.css"); 
    } 
} 

Это не работает, и я пытаюсь выяснить, почему. По умолчанию используется стиль style-white.css. Что мне не хватает? Я чувствую, что это одна из тех мелочей, которые легко [для новичка] игнорировать.

Заранее спасибо.

Answer 1

Я был в состоянии сделать эту работу с JQuery:

$(".onoffswitch").click(function(){ 
    if($('.onoffswitch-checkbox').is(':checked') == false) { 
     $("#pagestyle").attr("href", "css/styles-black.css"); 
    } else if ($('.onoffswitch-checkbox').is(':checked') == true) { 
     $("#pagestyle").attr("href", "css/styles-white.css"); 
    } 
}) 

Я также был в состоянии заставить его работать по-другому, чтобы быть немного менее специфичны о HREF, как я понимаю, не каждая страница будет расположены таким образом, что CSS/стили-white.css бы целесообразно:

$(".onoffswitch").click(function(){ 
    if($('.onoffswitch-checkbox').is(':checked') == false) {    
     $("#pagestyle").attr('href', function(i, blackCSS) { 
      return blackCSS.replace('white', 'black');     
     });    
    } 
}); 

я все же хотел бы выяснить, как заставить это работать с ванильным JS. Я уверен, что это то, что я делаю неправильно. Я был очень рад, что смог выработать какое-то решение, но,