Javascript-форум - Замена style.css на style1.css при обновлении страницы/ смена фона

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Замена style.css на style1.css при обновлении страницы/ смена фона (https://javascript.ru/forum/misc/45908-zamena-style-css-na-style1-css-pri-obnovlenii-stranicy-smena-fona.html)

Замена style.css на style1.css при обновлении страницы/ смена фона

Доброго дня!

Имеется два варианта фона для сайта.
Первый фон - не требует каких-либо изменений в style.css.

body {
  background-color: #bdbdbd;
  background-image: url('../images/img1.jpg');
 }
#main {
  width: 97%;
   margin-left: auto;
  margin-right: auto;
  position: relative;
 margin-top: 54px;

Второй фон - необходимо к <div id="main"> добавить margin-top и изменить width.

body {
  background-color: #bdbdbd;
  background-image: url('../images/img2.jpg');
  background-position: top center;
}
#main {
  width: 58%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  margin-top: 210px;}

Так же для второго фона появляется ссылка <a class="abody"> (чтобы при нажатии на фон - был переход на другой сайт).

Необходимо, чтобы при обновлении/перезагрузке страниц эти фоны менялись между собой в отношении 3 раза фон-1 к 1 разу фон-2. При этом ссылка должна работать только с фоном-2

<body class='home'>
	<a class="abody" href="#" target="_blank"></a>
       <div id="main">
	     <div class='container'>

Нашёл только скрипт смены фона при перезагрузке, но это не совсем то

<style>
    .style-0{
        background: red;
    }
    .style-1{
        background: red;
    }
    .style-2{
        background: blue;
    }
    .style-3{
        background: green;
    }
    .style-4{
        background: red;
    }
    .style-5{
        background: blue;
    }
    .style-6{
        background: green;
    }
    .style-7{
        background: red;
    }
    .style-8{
        background: blue;
    }
    .style-9{
        background: green;
    }
</style>
<body>
    Рэндом фон.
<script>
    document.body.className = 'style-' + parseInt(Math.random() * 10);
</script>
</body>

Т.К. все изменения идут через css, думаю,что их и нужно менять.

Werstman, все твои "изменения" запросто делаются добавлением некоего класса к

<div id="main">... </div>

И добавление это пусть делает серверный язык. Если он есть... :)

А почему не хочет это работать?

<link href="/css/main.css" media="screen" rel="stylesheet" type="text/css" id="stylesheet">

<script  type="text/javascript">
window.onload = function() {
            var w =  parseInt(Math.random() * 4);
                if (w == 0) {
                         document.getElementById("stylesheet").href='/css/main.css';
						
                }
            else {
                         document.getElementById("stylesheet").href='/css/main1.css';
				
                    }
             };
</script>
  </head>

Werstman, ну тебе же объяснили - просто меняй css класс. Не надо никаких стилей перегужать

<!DOCTYPE html>
<style>
.special{
    background: red;
}
</style>
<body>
<script>
if (Math.random() < 1/4) {
     document.body.className += ' special';
     document.write('<a href="#">Ссылка</a>');
}
</script>
</body>