В большинстве согласен с
laimas.
Можно еще добавить, что совсем слабовидящие пользуются экранными читалками, для использования которой сайт совсем никуда не годится. (Нужны атрибуты aria). А есть люди которые не могут в силу разных причин пользоваться мышью, и используют клавиатуру, для перемещения по сайту. И для них совсем никуда не годится делать кнопки с помощью div, без задания реакцию на нажатие кнопок....
Но как решение задачки, вот такой код
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: #fff;
color: #000;
font: 400 1rem/1.25rem sans-serif;
}
.blok {
max-width: 480px;
}
.knopka {
width: 100%;
padding: 5px;
border: 1px solid #8b00ff;
text-align: center;
margin: 10px;
cursor: pointer;
text-decoration: none;
color: #9400d3;
}
.knopka:hover {
width: 100%;
padding: 5px;
border: 1px solid #000;
text-align: center;
margin: 10px;
cursor: pointer;
text-decoration: none;
color: #8b00ff;
}
.vibran{
text-decoration: underline;
color: #8b00ff;
}
</style>
<style>
.fon{
background-color: #fff;
color: #000;
}
.chrift_osnovnoi{
font-family: sans-serif;
}
.razmer_osnovnoi{
font-size: 1rem;
}
</style>
<script>
let lnkfon = null;
let lnkchrift = null;
let lnkrazmer = null;
let mystyle = {fon: 'base', chrift: 'base', razmer: 'base'}
let head = document.querySelector('head')
function store () {
localStorage.mystyle = JSON.stringify(mystyle)
}
function setstyle (style) {
const est = document.createElement('style');
est.innerHTML = style;
head.appendChild (est);
return est;
}
function changefon (val) {
if (lnkfon) {
head.removeChild (lnkfon)
lnkfon = null
}
if (val == 'drugoi') {
lnkfon = setstyle('.fon{background-color: #000;color: #fff;}')
}
mystyle.fon = val
store()
}
function changechrift (val) {
if (lnkchrift) {
head.removeChild (lnkchrift)
lnkchrift = null
}
if (val == 'drugoi') {
lnkchrift = setstyle('.chrift{font-family: serif;}')
}
mystyle.chrift = val
store()
}
function changerazmer (val) {
if (lnkrazmer) {
head.removeChild (lnkrazmer)
lnkrazmer = null
}
if (val == '15') {
lnkrazmer = setstyle('.chrift{font-size: 1.5rem;;}')
} else if (val == '20') {
lnkrazmer = setstyle('.chrift{font-size: 2rem;;}')
}
mystyle.razmer = val
store()
}
if (localStorage.mystyle) {
mystyle = JSON.parse(localStorage.mystyle)
if (mystyle.fon != 'base') changefon (mystyle.fon)
if (mystyle.chrift == 'base') changechrift (mystyle.chrift)
if (mystyle.razmer != 'base') changerazmer (mystyle.razmer)
}
</script>
</head>
<body class="fon chrift razmer">
<div class="blok">
<div class="knopka knopka1 vibran">Основной фон</div>
<div class="knopka knopka2">Смена фона</div>
<div class="knopka knopka3 vibran">Основной шрифт</div>
<div class="knopka knopka4">Другой шрифт</div>
<div class="knopka knopka5 vibran">Основной размер</div>
<div class="knopka knopka6">Увеличить размер * 1,5</div>
<div class="knopka knopka7">Увеличить размер * 2</div>
<div class="tekst"><br><br>
ОБ ОРГАНИЗАЦИИ<br><br>
Деятельность нашей организации направлена на оказание разного рода помощи малоимущим, социально незащищенным
слоям населения.
?<br><br>
На сегодняшний день открыты приюты, предназначенные для инвалидов и престарелых граждан, лиц, ведущих
бродяжнический образ жизни, а так же для людей, оставшихся без средств к существованию и не имеющих крова над
головой.<br>
ЦЕЛЬ ДЕЯТЕЛЬНОСТИ:<br><br>
минимализация бродяжничества в Новосибирске и Новосибирской области
ОСНОВНЫЕ ЗАДАЧИ:<br><br>
социальная и психологическая адаптация граждан через проживание в центре восстановления личности;<br>
восполнение жизненно важных потребностей;<br>
развитие в людях чувства сострадания, взаимовыручки, единства, милосердия, любви к ближним;<br>
восстановление социального статуса, восстановление социальных – трудовых навыков, трудоустройство.<br>
Я знаю, что есть люди, которым нужна помощь,<br>
и мы в силах оказать её.<br><br>
Директор АНО "ТВОЙ ДОМ"<br>
Наталья Петровна Першина
</div>
</div>
<script>
const body = document.querySelector("body");
const knopka1 = document.querySelector(".knopka1");
const knopka2 = document.querySelector(".knopka2");
const knopka3 = document.querySelector(".knopka3");
const knopka4 = document.querySelector(".knopka4");
const knopka5 = document.querySelector(".knopka5");
const knopka6 = document.querySelector(".knopka6");
const knopka7 = document.querySelector(".knopka7");
let fun_knopka1 = () =>{
changefon ('base')
knopka1.classList.add("vibran");
knopka2.classList.remove("vibran");
}
knopka1.addEventListener("click", fun_knopka1);
let fun_knopka2 = () =>{
changefon ('drugoi')
knopka1.classList.remove("vibran");
knopka2.classList.add("vibran");
}
knopka2.addEventListener("click", fun_knopka2);
let fun_knopka3 = () =>{
changechrift ('base')
knopka3.classList.add("vibran");
knopka4.classList.remove("vibran");
}
knopka3.addEventListener("click", fun_knopka3);
let fun_knopka4 = () =>{
changechrift ('drugoi')
knopka3.classList.remove("vibran");
knopka4.classList.add("vibran");
}
knopka4.addEventListener("click", fun_knopka4);
let fun_knopka5 = () =>{
changerazmer ('base')
knopka5.classList.add("vibran");
knopka6.classList.remove("vibran");
knopka7.classList.remove("vibran");
}
knopka5.addEventListener("click", fun_knopka5);
let fun_knopka6 = () =>{
changerazmer ('15')
knopka5.classList.remove("vibran");
knopka6.classList.add("vibran");
knopka7.classList.remove("vibran");
}
knopka6.addEventListener("click", fun_knopka6);
let fun_knopka7 = () =>{
changerazmer ('20')
knopka5.classList.remove("vibran");
knopka6.classList.remove("vibran");
knopka7.classList.add("vibran");
}
knopka7.addEventListener("click", fun_knopka7);
</script>
</body>
</html>