Как установить цвет фона тела с помощью JS, до полной загрузки страницы?
Я использую этот скрипт, чтобы позволить пользователю изменять цвет фона...
document.onclick = function SetFavColor(e) {
if (e.target.className == 'AvcGbtn') {
var favColor = e.target.style.backgroundColor;
localStorage.setItem('color', favColor);
document.body.style.backgroundColor = favColor;
console.log(favColor);
}
};
document.addEventListener('DOMContentLoaded', function GetFavColor() {
var favColor = document.body.style.backgroundColor;
var color = localStorage.getItem('color');
if (color === '') {
document.body.style.backgroundColor = favColor;
} else {
document.body.style.backgroundColor = color;
}
});
CSS:
body {
max-width: 100%;
min-width: 100%;
height: 100%;
font-family: normal;
font-style: normal;
font-weight: normal;
background-color: transparent;
}
.AvcGbtn {
display: inline-block;
width: 2em;
height: 2em;
}
HTML:
<span class="AvcGbtn" style="background: #ffffff; background-size: 100% 100%;" rel="nofollow"></span>
<span class="AvcGbtn" style="background: #757575; background-size: 100% 100%;" rel="nofollow"></span>
Это работает, но проблема в том, что он показывает выбранный цвет после полной загрузки страницы. Я хочу показать цвет, который пользователь выбирает до загрузки страницы.
Пример: цвет фона белый, и пользователь выбирает красный. Сценарий показывает белый цвет фона перед выделением, а после того, как пользователь выбирает красный, сценарий меняет цвет фона на красный. Как я могу это сделать?
Это именно то, что я пытаюсь сделать с Javascript, пример CSS
body:before {
background-color: red;
}
Ответы
Ответ 1
Сначала вы можете упростить логику установки цвета, как показано ниже:
document.addEventListener('DOMContentLoaded', function GetFavColor() {
var color = localStorage.getItem('color');
if (color != '') {
document.body.style.backgroundColor = color;
}
});
Изменять цвет нужно только в том случае, если что-то хранится локально, если не будет использоваться цвет по умолчанию, указанный в CSS.
Чтобы получить быстрое изменение, вы можете избавиться от любого события и поместить свой скрипт в тег head, и вместо нацеливания на элемент body вы можете нацелиться на элемент html, и вы получите тот же результат из-за фоновое распространение:
<!DOCTYPE html>
<html>
<head>
<!-- coloration -->
<style>html {background:red} /*default color*/</style>
<script>
var color ="blue" /*localStorage.getItem('color')*/;
if (color != '') {
document.documentElement.style.backgroundColor = color;
}
</script>
<!-- -->
</head>
<body>
</body>
</html>
Ответ 2
Вам нужно использовать другое событие onreadystatechange. Этот стреляет перед onload. Я немного поигрался с функциями и установил "оранжевый" в качестве значения по умолчанию для этого события, а другой в качестве нажатия кнопки "ВЫКЛЮЧИТЬ" кнопки, поскольку я отключил файлы cookie, которых не было в вашем коде. Заметка; если вы хотите, чтобы скрипт выполнялся так быстро, сделайте это. (красный) как вызов (зеленый) как самоисполняющийся.
Я добавил console.log чтобы вы могли видеть, что цвета меняются с красного на оранжевый и синий в зависимости от событий (происходит быстро, смотрите время записи в журнал)
(window.getColor=function (c) {
var favColor = document.body.style.backgroundColor;
var color = !!c ? c : "#FFFAFF"; //getCookie('color');
if (color === '') {
document.body.style.backgroundColor = favColor;
} else {
document.body.style.backgroundColor = color;
}
console.log(color);
})('green');
function setColor(e) {
if (e.target.className == 'AvcGbtn') {
var favColor = e.target.style.backgroundColor;
//setCookie('color', favColor);
document.body.style.backgroundColor = favColor;
console.log(favColor);
} else {
getColor("#DAFFFA");
}
}
document.onreadystatechange = function() {
if (document.readyState === 'complete') {
//dom is ready, window.onload fires later
getColor("orange");
}
};
document.onclick = setColor;
window.onload = function() {
getColor('blue');
};
getColor('red');
body {
max-width: 100%;
min-width: 100%;
height: 100%;
font-family: normal;
font-style: normal;
font-weight: normal;
background-color: transparent;
}
.AvcGbtn {
display: inline-block;
width: 2em;
height: 2em;
}
<span class="AvcGbtn" style="background: #ffffff; background-size: 100% 100%;" rel="nofollow"></span>
<span class="AvcGbtn" style="background: #e8e8e8; background-size: 100% 100%;" rel="nofollow"></span>
Ответ 3
Не стоит сбрасывать со счетов удивительную мощь Javascript старой школы: эффективно используйте document.write в нужных местах, например в конце тега head.
<head>
<link rel="stylesheet" type="text/css" href="..."/>
<script type="text/javascript">
(function(){
var color = localStorage.getItem('color');
if(typeof(color) === "string" && color != "") {
document.write("<style type=\"text\/css\">body{background-color:" + color + ";}</style>");
}
}());
</script>
</head>
Ответ 4
Вместо того, чтобы помещать свою функцию изменения цвета фона в window.onload, попробуйте поместить ее в <script> сразу после открывающего <body>:
<html>
...
<body>
<script>
// This js code will be executed before the rest of the page is loaded
</script>
...
</body>
</html>
Ответ 5
Поскольку встроенный CSS обрабатывается ДО обработки javascript, вы пытались просто удалить цвет фона из встроенного CSS?
document.onclick = function(e) {
if (e.target.className == 'AvcGbtn') {
var favColor = e.target.style.backgroundColor;
setCookie('color', favColor);
document.body.style.backgroundColor = favColor;
console.log(favColor);
}
};
window.onload = function() {
var favColor = document.body.style.backgroundColor;
var color = getCookie('color');
if (color === '') {
document.body.style.backgroundColor = favColor;
} else {
document.body.style.backgroundColor = color;
}
};
body {
max-width: 100%;
min-width: 100%;
height: 100%;
font-family: normal;
font-style: normal;
font-weight: normal;
background-color: transparent;
}
<span class="AvcGbtn" style="background-size: 100% 100%;" rel="nofollow"></span>
<span class="AvcGbtn" style="background-size: 100% 100%;" rel="nofollow"></span>
