Давно собирался написать простой код для изменения цвета текста и фона страницы по желанию пользователя.
Несмотря на то, что в инете есть масса плагинов, расширений для браузеров, но не все пользователи готовы нагружать свои устройства, а у меня есть очень много знакомых, которые воспринимают текст только полностью инвертированный ( черный фон - светлый текст)
Когда-то давно мне попадался такой плагин, который позволял изменить цвет фона и текста на сайте. Для этого посетитель нажимал на соответствующую кнопку и в сплывающем окне выбирал понравившийся цвет из палитры.
Таким образом можно было выбрать цвет фона страницы и цвет текста.
В настоящее время, прогуглив достаточно много времени я его не нашел, а учитывая то, что эту задачу так или иначе приходится решать, то решил быстро написать что-то сам.
То что у меня получилось, вы можете посмотреть на сайте Codepen.
See the Pen ColorTxt&BodyRadioButtons by YaroslavW (@YaroslavW) on CodePen.
Если коротко, то у нас есть какой то текст на странице, размещенный в параграфах
<p>.
Мы создали два блока с радио-кнопками, которые будут менять цвет фона ( группа кнопок с
id = "bgColor") и группа меняющая цвет текста (
id="textColor"). Для того, чтобы получить значение value выбранного элемента я использовал jQuery.
В коде подключение jQuery выше скрипта, который в самом низу страницы.
Вы можете сами добавить абсолютно любое количество кнопок, главное прописать значение цвета в их значение
value.
Функция запускается при нажатии на кнопку и позволяет создавать самые разные комбинации цвета.
Весь код я поместил в один документ -
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>Change Back Ground Color</h2>
<div id="bgColor">
<label><input type="radio" name="radio" value="white">White</label>
<label><input type="radio" name="radio" value="yellow">Yellow</label>
<label><input type="radio" name="radio" value="red">Red</label>
<label><input type="radio" name="radio" value="green">Green</label>
<label><input type="radio" name="radio" value="lightgreen">Light Green</label>
<label><input type="radio" name="radio" value="blue">Blue</label>
<label><input type="radio" name="radio" value="gray">Gray</label>
<label><input type="radio" name="radio" value="black">Black</label>
</div>
<hr>
<h2>Change Text Color</h2>
<div id="textColor">
<label><input type="radio" name="txc" value="white">White</label>
<label><input type="radio" name="txc" value="yellow">Yellow</label>
<label><input type="radio" name="txc" value="red">Red</label>
<label><input type="radio" name="txc" value="green">Green</label>
<label><input type="radio" name="txc" value="lightgreen">Light Green</label>
<label><input type="radio" name="txc" value="blue">Blue</label>
<label><input type="radio" name="txc" value="gray">Gray</label>
<label><input type="radio" name="txc" value="black">Black</label>
<br />
<button type="button" onclick="changeColor()">Change Color </button>
<h1>Header h1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia minima illum quam eveniet facilis ab aliquam. At enim sint, a nihil quidem sunt, atque, nesciunt voluptatibus laborum ipsum neque natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eveniet voluptas, dignissimos alias deserunt et assumenda aliquam quod fugit soluta facere consequuntur velit eligendi quis dolor dolore. Ipsum, iusto aspernatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore rem commodi, eaque adipisci voluptatum nemo totam architecto! Maxime error dolore repudiandae optio in reiciendis, pariatur sapiente, amet. Sint, sit.</p>
<h2>Header2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia minima illum quam eveniet facilis ab aliquam. At enim sint, a nihil quidem sunt, atque, nesciunt voluptatibus laborum ipsum neque natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eveniet voluptas, dignissimos alias deserunt et assumenda aliquam quod fugit soluta facere consequuntur velit eligendi quis dolor dolore. Ipsum, iusto aspernatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore rem commodi, eaque adipisci voluptatum nemo totam architecto! Maxime error dolore repudiandae optio in reiciendis, pariatur sapiente, amet. Sint, sit.</p>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script>
function changeColor(){
var bgColor = document.getElementsByName('radio');
var txColor = document.getElementsByName('txc');
for(var i = 0; i < bgColor.length; i++){
if(bgColor[i].checked){
var bgcolor = $('input[name=radio]:checked').val();
}
}
for(var j = 0; j < txColor.length; j++){
if(txColor[j].checked){
var txcolor = $('input[name=txc]:checked').val();
}
}
document.querySelector('body').style.backgroundColor = bgcolor;
document.querySelector('body').style.color = txcolor;
};
</script>
</body>
</html>
Если вы знаете верстку и умеете пользоваться инструментами разработчика, то вам не составит труда найти те элементы, у которых вы хотите изменить свойства и подставить их в две последние строчки кода:
document.querySelector('Класс или имя селектора ФОН').style.backgroundColor = bgcolor;
document.querySelector('Класс или имя селектора ТЕКСТ').style.color = txcolor;
Так вы сможете позволить пользователю изменять цвет текста и фона даже в своем блоге.
Маленькие хитрости.
Такое изменение цвета фона и текста будет действовать (сохраняться) до перезагрузки браузером страницы, или пока пользователь не закроет вкладку. При повторном открытии вашего сайта, ему придется все действия по индивидуальной настройке выполнить снова.
Мы можем решить эту проблему с помощью
localStorage. Мы сможем позволить браузеру пользователя сохранить выбранные настройки для нашего сайта и применить их сразу же, как только пользователь вновь вернется на наш сайт.
Для этого в приведенный выше код, я добавил несколько строк для сохранения данных и проверки их при повторном посещении сайта.
Я выделили их в коде, просто для наглядности.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>Change Back Ground Color</h2>
<div id="bgColor">
<label><input type="radio" name="radio" value="white">White</label>
<label><input type="radio" name="radio" value="yellow">Yellow</label>
<label><input type="radio" name="radio" value="red">Red</label>
<label><input type="radio" name="radio" value="green">Green</label>
<label><input type="radio" name="radio" value="lightgreen">Light Green</label>
<label><input type="radio" name="radio" value="blue">Blue</label>
<label><input type="radio" name="radio" value="gray">Gray</label>
<label><input type="radio" name="radio" value="black">Black</label>
</div>
<hr>
<h2>Change Text Color</h2>
<div id="textColor">
<label><input type="radio" name="txc" value="white">White</label>
<label><input type="radio" name="txc" value="yellow">Yellow</label>
<label><input type="radio" name="txc" value="red">Red</label>
<label><input type="radio" name="txc" value="green">Green</label>
<label><input type="radio" name="txc" value="lightgreen">Light Green</label>
<label><input type="radio" name="txc" value="blue">Blue</label>
<label><input type="radio" name="txc" value="gray">Gray</label>
<label><input type="radio" name="txc" value="black">Black</label>
<br />
<button type="button" onclick="changeColor()">Change Color </button>
<h1>Header h1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia minima illum quam eveniet facilis ab aliquam. At enim sint, a nihil quidem sunt, atque, nesciunt voluptatibus laborum ipsum neque natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eveniet voluptas, dignissimos alias deserunt et assumenda aliquam quod fugit soluta facere consequuntur velit eligendi quis dolor dolore. Ipsum, iusto aspernatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore rem commodi, eaque adipisci voluptatum nemo totam architecto! Maxime error dolore repudiandae optio in reiciendis, pariatur sapiente, amet. Sint, sit.</p>
<h2>Header2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia minima illum quam eveniet facilis ab aliquam. At enim sint, a nihil quidem sunt, atque, nesciunt voluptatibus laborum ipsum neque natus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia eveniet voluptas, dignissimos alias deserunt et assumenda aliquam quod fugit soluta facere consequuntur velit eligendi quis dolor dolore. Ipsum, iusto aspernatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum labore rem commodi, eaque adipisci voluptatum nemo totam architecto! Maxime error dolore repudiandae optio in reiciendis, pariatur sapiente, amet. Sint, sit.</p>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script>
if(localStorage.getItem('bgcolor') != null){
var fon = localStorage.getItem('bgcolor');
document.querySelector('body').style.backgroundColor = fon;
}
if(localStorage.getItem('txcolor') != null){
var txt = localStorage.getItem('txcolor');
document.querySelector('body').style.color = txt;
}
function changeColor(){
var bgColor = document.getElementsByName('radio');
var txColor = document.getElementsByName('txc');
for(var i = 0; i < bgColor.length; i++){
if(bgColor[i].checked){
var bgcolor = $('input[name=radio]:checked').val();
}
}
for(var j = 0; j < txColor.length; j++){
if(txColor[j].checked){
var txcolor = $('input[name=txc]:checked').val();
}
}
document.querySelector('body').style.backgroundColor = bgcolor;
localStorage.setItem('bgcolor',bgcolor);
document.querySelector('body').style.color = txcolor;
localStorage.setItem('txcolor',txcolor);
};
</script>
</body>
</html>
Я, ради эксперимента, поставил на пробном сайте -
traningforblog.blogspot.com. Здесь вы можете посмотреть пройдя по ссылке. Вы можете изменить цвет любых элементов, причем в любом количестве, если выберете их и добавите в код (как последние две строчки - примере). А чтобы добавить в блог в виде гаджета, то здесь все просто.
Для этого вам просто нужно перейти во вкладку -
"Шаблоны" -> "Добавить гаджет" -> "Добавить HTML&JavaScript"
Код мало чем отличается от приведенного, поэтому дублировать его здесь не буду. Если у вас есть желание. то вы всегда можете его посмотреть, скопировать или скачать себе с
моего Google Drive по этой ссылке
Как изменять размер шрифта сайта пользователем.
Как сделать заглавной каждую букву в слове (JS)
