Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Смена стилей нажатием на кнопку (https://javascript.ru/forum/misc/80255-smena-stilejj-nazhatiem-na-knopku.html)

ddro3doff 15.05.2020 13:49
Цитата:
Сообщение от рони (Сообщение 524305)
ddro3doff,
<link id="engcss" rel="stylesheet" type="text/css" href="">
второй линк добавили?
Теперь все работает как нужно, только при загрузке страницы, первым загружается страница без стилей на белом фоне , а потом уже подхватываются css. Смотрится очень некрасиво + бьет по глазам из-за темного дизайна. Можно как-то устранить данный дефект?
Спасибо за терпение :thanks:

рони 15.05.2020 16:14
ddro3doff,
скрипт и теги link перенесите как можно выше в head

ddro3doff 15.05.2020 22:05
Пробовал, все ровно не успевает.

рони 15.05.2020 22:08
ddro3doff,
пока не могу ничего добавить, может специалисты по дизайну что-то предложат.

рони 15.05.2020 22:10
ddro3doff,
может вам грузить всё сразу, а смену стилей сделать через смену класса body.

ddro3doff 15.05.2020 22:20
Цитата:
Сообщение от рони (Сообщение 524356)
ddro3doff,
может вам грузить всё сразу, а смену стилей сделать через смену класса body.
Если я правильно понял, то если я я буду загружать основные css сразу, то при загрузке страницы они всегда будут подхватываться первыми. Даже если я буду менять класс у body.

ddro3doff 15.05.2020 22:22
рони,
Вот нашел пример рабочего скрипта на сайте , только вот как он добился такого результат? https://akniga.org/

рони 15.05.2020 22:27
смена темы оформления
 
ddro3doff,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
body.dark {
    background-color: #000000;
    color: #FFFFFF;
}
</style>
</head>
<body>
<script>
function setTheme(theme) {
document.body.classList.remove('dark', 'light');
if(!theme) theme = localStorage.getItem('theme') || 'dark';
else {localStorage.setItem('theme', theme) };
document.body.classList.add(theme)
}
setTheme();
</script>
<h1>test</h1>
<img style="cursor:pointer;" src="/templates/Default/images/off.png" onclick="setTheme('dark')">
<img style="cursor:pointer;" src="/templates/Default/images/on.png" onclick="setTheme('light')">
</body>
</html>

рони 15.05.2020 22:32
Цитата:
Сообщение от ddro3doff
только вот как он добился такого результат?
пост #15 и #18 (возможно там другая реализация, но смысл тот же, смена класса у body);
скрипт ставить сразу после <body>

ddro3doff 15.05.2020 23:02
А кроме body еще можно класс какой нибудь подменить?
Например
.action-buttons {
height: 100%;
width: 100%;
margin-left: 0px;
background: #151617;
float: left;
}


Часовой пояс GMT +3, время: 16:37.
Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице