Как по условию if применить другие стили

@alanat · Регистрация: 16.07.2012

Author24 — интернет-сервис помощи студентам

Добрый день.

HTML5

<!doctype html>
<html>
<head>
<style>
.d1
{
    width:100px;
    height:100px;
    background-color:green;
    float:left;
}
 
.d2
{
    width:100px;
    height:100px;
    background-color:red;
    float:left;
}
</style>
<script>if(screen.width <= 596){}</script>
</head>
 
<body>
 
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>

Как по условию if применить другие стили?

CSS

.d1
{
    width:200px;
    height:200px;
    float:inherit;
}
 
.d2
{
    width:200px;
    height:200px;
    float:inherit;
}

Заранее благодарен за ответ.

@DrType · 28.02.2020, 23:10

Предлагаю использовать коллекцию document.styleSheets, содержащую все таблицы стилей, подключенные к странице. Примерно так:

Javascript

1	if(screen.width <= 596){document.styleSheets[2 /или 1?/].disabled=true;}

Это команда позволит отключить соответствующую таблицу, и стили изменятся в соответствии с приоритетами стилевых правил.

Добавлено через 4 минуты

Не по теме:

К сожалению, я плохо представляю, в каком порядке следуют стилевые таблицы в этом массиве. Нулевая, по-моему, это пользовательские стили, или нет?

@alanat · 29.02.2020, 00:17 **[ТС]**

Сообщение от DrType

Это команда позволит отключить соответствующую таблицу, и стили изменятся в соответствии с приоритетами стилевых правил.

Если записать стили как

CSS

.d1
{
    width:100px;
    height:100px;
    background-color:green;
    float:left;
}
 
.d2
{
    width:100px;
    height:100px;
    background-color:red;
    float:left;
}
 
 
@media (max-width: 596px) {
.d1
{
    float:inherit;
}
 
.d2
{
    float:inherit;
}
}

то получается, что стили @media (max-width: 596px) подключаются, если разрешение экрана 596 или меньше. Т.е. css сами определяют разрешение экрана и заменяют предыдущие стили.

Можно ли сделать так, чтобы в стилях информация о разрешении экрана заменялсь на информацию от javascript?

Что я имею в виду. Обычно стили считывают информацию о разрешении экрана. Если разрешение экрана меньше 596px, то подключаются стили из @media (max-width: 596px) (и заменяют предыдущие стили с такими же названиями). Можно ли как-то "обмануть" стили и "подсунуть" информацию через javascript о том, что разрешение больше 596px?

Это необходимо, чтобы у пользователя была возможность не "застревать" на мобильной версии, а иметь возможность перейти на версию для ПК.

На данный момент у меня реализована схема, когда загружаются основные стили, а когда код javascript отпределяет, что разрешение меньше 596px, то подгружает еще один файл со стилями, который подстраивает сайт под мобильную версию.
Хочется убрать подгрузку еще одного файла со стилями.

@DrType · 29.02.2020, 01:34

Я представляю себе схему так. JS определяет screen.width, и если она меньше 596, подгружает файл со стилями для мобильной версии. Так происходит всегда, автоматически. Но на странице есть кнопка вроде "перейти на версию для ПК", по клику на которую вызывается функция-обработчик, дезактивирующая файл с мобильными стилями. Этот путь мне понятен — всё делает JS; а обманывать CSS было бы слишком уж хитро, если вообще получится.

@alanat · 29.02.2020, 08:16 **[ТС]**

Сообщение от DrType

дезактивирующая файл с мобильными стилями

Т.е. правильно ли я понял, что сначала загружаются стили основной версии сайта, затем - мобильной (по screen.width). А если нажата кнопка "перейти на версию для ПК", деактивирует файл с мобильными стилями?

@klopp · 29.02.2020, 09:45

файлы со стилями загружаются в той последовательности, как это прописано в html

@DrType · 29.02.2020, 09:56

alanat, да. Я считаю это естественным решением. И если у Вас получается подключать новые стилевые файлы, то остаётся понять, как именно их отключать.

@gogolik · 29.02.2020, 16:14

Не проще ли в localStorage/sessionStorage хранить значение mob/desc и в зависимости от значения изменять meta viewport?

Javascript

1 2	viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=1200');

@alanat · 29.02.2020, 18:43 **[ТС]**

Сообщение от gogolik

Не проще ли в localStorage/sessionStorage хранить значение mob/desc и в зависимости от значения изменять meta viewport

Это что такое?

@gogolik · 29.02.2020, 19:31

alanat, что именно?

@alanat · 29.02.2020, 22:10 **[ТС]**

Сообщение от gogolik

что именно?

Вся эта строка.

@alanat · 04.03.2020, 19:50 **[ТС]**

Сообщение от gogolik

Не проще ли в localStorage/sessionStorage

В чём преимущество перед document.cookie.match ?

@gogolik · 04.03.2020, 20:03

alanat, в данном случае - разницы нет.

@alanat · 08.03.2020, 23:17 **[ТС]**

Сообщение от gogolik

viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=1200');

Этот код почему-то не работает в мобильном Chrome.
В частности, не работает следущее:

HTML5

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<style>
.d1
{
    width:100px;
    height:100px;
    background-color:green;
    color:white;
    font-size:xx-large;
}
 
.d2
{
    display:inline;
}
 
.d3
{
    display: none;
}
 
@media (max-width: 596px) {
.d2
{
    display: none;
}
 
.d3
{
    display: inline;
}
}
</style>
<script>
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=597');
</script>
</head> 
<body> 
<div class="d1"><span class="d2">ПК <script>document.write(screen.width);</script></span><span class="d3">Моб <script>document.write(screen.width);</script></span></div>
</body>
</html>

В IE11, Chrome для ПК (включая переключение по F12), мобильной версии Samsung отображается "ПК", т.е.

Javascript

1 2	viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=597');

отрабатывается.

А мобильный Chrome упоно показывает "Моб", как будто

Javascript

1 2	viewport = document.querySelector("meta[name=viewport]"); viewport.setAttribute('content', 'width=597');

не существует.
Есть ли подобный код, который работает и в мобильном Chrome?

@gogolik Модератор 2820 / 1869 / 805 Регистрация: 13.03.2010 Сообщений: 6,106
	04.03.2020, 20:03	13
	alanat, в данном случае - разницы нет. 0

@DrType 6460 / 3605 / 1074 Регистрация: 07.09.2019 Сообщений: 5,844 Записей в блоге: 1
	29.02.2020, 01:34	4
	Я представляю себе схему так. JS определяет `screen.width`, и если она меньше 596, подгружает файл со стилями для мобильной версии. Так происходит всегда, автоматически. Но на странице есть кнопка вроде "перейти на версию для ПК", по клику на которую вызывается функция-обработчик, дезактивирующая файл с мобильными стилями. Этот путь мне понятен — всё делает JS; а обманывать CSS было бы слишком уж хитро, если вообще получится. 0

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 754
	29.02.2020, 08:16 [ТС]	5
	Сообщение от DrType дезактивирующая файл с мобильными стилями Т.е. правильно ли я понял, что сначала загружаются стили основной версии сайта, затем - мобильной (по screen.width). А если нажата кнопка "перейти на версию для ПК", деактивирует файл с мобильными стилями? 0

@klopp 566 / 465 / 183 Регистрация: 14.10.2017 Сообщений: 1,259
	29.02.2020, 09:45	6
	файлы со стилями загружаются в той последовательности, как это прописано в html 0

@DrType 6460 / 3605 / 1074 Регистрация: 07.09.2019 Сообщений: 5,844 Записей в блоге: 1
	29.02.2020, 09:56	7
	alanat, да. Я считаю это естественным решением. И если у Вас получается подключать новые стилевые файлы, то остаётся понять, как именно их отключать. 0

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 754
	29.02.2020, 18:43 [ТС]	9
	Сообщение от gogolik Не проще ли в localStorage/sessionStorage хранить значение mob/desc и в зависимости от значения изменять meta viewport Это что такое? 0

@gogolik Модератор 2820 / 1869 / 805 Регистрация: 13.03.2010 Сообщений: 6,106
	29.02.2020, 19:31	10
	alanat, что именно? 0

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 754
	29.02.2020, 22:10 [ТС]	11
	Сообщение от gogolik что именно? Вся эта строка. 0

@alanat 12 / 12 / 1 Регистрация: 16.07.2012 Сообщений: 754
	04.03.2020, 19:50 [ТС]	12
	Сообщение от gogolik Не проще ли в localStorage/sessionStorage В чём преимущество перед document.cookie.match ? 0

Как по условию if применить другие стили

Решение