Изменение CSS с помощью JS + отмена нового стиля

Имеем блок + стили.
Задача: Применить к блоку новый стиль с возможностью его отмены

Сразу можете открыть демонстрацию реализации

Задача не сложная, если подходит вариант использования внутренних стилей.

Внутренние стили для блока


<style type="text/css" class="css-1">
	.block {
		background-color: #000;
		width: 100px;
		height: 100px;
		border-left: 23px solid yellow;
	}
</style>

Сразу применим для блока со стилями стиль, дальше будет понятно, для чего.


<style>
	[type="text"] {
		display: none;
	}
</style>

Сам блок

<div class="block"></div>

Теперь добавим кнопки для применения стилей для блока и отмены новых стилей


<h1>Новый стиль блока</h1>

<button onclick="changeStyle()">Применить</button>
<button onclick="backStyle()">Отменить</button>

Подключим jQuery

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Добавим функцию для кнопки применения стилей

<script>
	function changeStyle() {
		var style = '
<style type="text/css" class="css-2">.block {background-color: #cccccc;width:150px;height:150px;}</style>

';
		$('.css-1').attr('type', 'text');
		$('body').append(style);
	}
</script>

Переменную style можно генерировать отправляя ajax запрос. Ну это уже дело поставленной для вас задачи
Строкой

$('.css-1').attr('type', 'text');

Мы применяем атрибуту type, значение text, тем самым превращаем данные в блоке style.css-1 в обычный текст
Далее в конец тега body, добавляем новый стиль

$('body').append(style);

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

<script>
	function backStyle() {
		$('.css-2').remove(); // удаляем новый стиль
		$('.css-1').attr('type', 'text/css'); // возвращаем атрибуту type, значение text/css
	}
</script>

Ну и вот, собственно весь код страницы

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>


<style>
		[type="text"] {
			display: none;
		}
	</style>



<style type="text/css" class="css-1">
		.block {
			background-color: #000;
			width: 100px;
			height: 100px;
			border-left: 23px solid yellow;
		}
	</style>



<div class="block"></div>



<h1>Новый стиль блока</h1>

	<button onclick="changeStyle()">Применить</button>
	<button onclick="backStyle()">Отменить</button>

	<script>
		function changeStyle() {
			var style = '
<style type="text/css" class="css-2">.block {background-color: #cccccc;width:150px;height:150px;}</style>

';
			$('.css-1').attr('type', 'text');
			$('body').append(style);
		}
		function backStyle() {
			$('.css-2').remove();
			$('.css-1').attr('type', 'text/css');
		}
	</script>

</body>
</html>

Удачи и успешного рендеринга :)


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *