Можно ли изменить таблицы стилей css после загрузки страницы?

Пытаюсь добавить "темный режим / светлый режим". Я пытаюсь сделать это, используя две разные таблицы стилей CSS и нажимая на них одну кнопку.

ive пробовал использовать setAttribute, innerHTML, removeAtribute (перемещая содержимое одной таблицы стилей в теги и пытаясь удалить одну таблицу стилей)

change to Light Mode

function light(){

    document.getElementById(css).setAttribute("href", "LIGHTMODE.CSS")
    document.getElementById(darkmode).innerHTML="Change to Light Mode"
    document.getElementById(darkmode).onclick="dark()"
    cos
}

function dark(){

            document.getElementById(css).href = "LIGHTMODE.CSS"
            document.getElementById(darkmode).innerHTML="Change to Dark Mode"
            document.getElementById(darkmode).onclick ="light()"
            console.log(darkmode)
    }

Он должен идентифицировать сквозной идентификатор и изменять href на то, что указано


javascript function css stylesheet
person IGN03    schedule 12.09.2019    source источник
comment
Возможный дубликат Как загрузить файлы CSS с помощью Javascript?   -  person Danny Buonocore    schedule 12.09.2019

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете загрузить обе таблицы стилей и включать / отключать их по желанию.

<link rel="stylesheet" href="darkmode.css" class="css dark">
<link rel="stylesheet" href="lightmode.css" class="css light" disabled>

<script>
    function setcssmode(s) {
        document.querySelectorAll('link.css').forEach(ss => {
            ss.disabled = !ss.classList.contains(s);
        })
    }
    setcssmode('dark');
    setcssmode('light');
</script>

В этом примере таблица стилей Light отключена при загрузке страницы.

Преимущества этого способа заключаются в том, что отключенная таблица стилей все еще загружается при загрузке страницы, поэтому переключение будет мгновенным, а не потенциально задержанным, пока загружается CSS для альтернативного стиля.

person Jaromanda X    schedule 12.09.2019

arrow_upward
0
arrow_downward

Если вы просто добавите href к существующему элементу, браузер не будет автоматически загружать новый CSS.

Между прочим, обе функции dark и light используют один и тот же CSS, а именно LIGHTMODE.CSS, возможно, вы захотите использовать DARKMODE.CSS в темноте

function dark(){
 // Get HTML head element 
        var head = document.getElementsByTagName('HEAD')[0];  

        // Create new link Element 
        var link = document.createElement('link'); 

        // set the attributes for link element  
        link.rel = 'stylesheet';  

        link.type = 'text/css'; 

        link.href = 'DARKMODE.CSS';  

        // Append link element to HTML head 
        head.appendChild(link);  
}
person sapy    schedule 12.09.2019