Форум

cherrypashka · #1 (**permalink**) 08.06.2017, 15:07

Здравствуйте! Подскажите, пожалуйста, могу я менять при помощи javascript свойства css только для определенного media?

j0hnik · #2 (**permalink**) 08.06.2017, 15:44

<html>
<head>
	<title>Untitled</title>
	<meta charset="utf-8">
</head>
<body>
	<div id="col">545</div>
	<script>
		var media = '@media only screen and (max-width:450px) {#col{background-color: red;}}';
		var s = document.createElement('style');
		s.innerHTML = media;
		document.getElementsByTagName('head')[0].appendChild(s);
	</script>
</body>
</html>

Так например

j0hnik · #3 (**permalink**) 08.06.2017, 15:52

если тег стайл есть, можно так

<html>
<head>
<style>
</style>
</head>
<body>
	<div id="col">545</div>
	<script>
		document.querySelector('style').innerHTML += '@media only screen and (max-width:450px) {#col{background-color: red;}}';
	</script>
</body>
</html>

ksa · #4 (**permalink**) 08.06.2017, 16:43

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

при помощи javascript свойства css только для определенного media?

Т.е. тот media уже есть, но нужно в нем чего-то поменять?

Как читать и менять все содержимое тега style уже показал j0hnik.

А вот как найти и поменять часть текстовой информации - это уже другая задача.

j0hnik · #5 (**permalink**) 08.06.2017, 17:41

.innerHTML +=
Стили допишутся в конец и соответственно "перезапишут" существующие, ну то есть будут выполнятся т.к они в конце.
но чтобы не разводить болото, конечно лучше менять текущие значения, если они существуют. а для этого надо получить слили и через регулярки/массивы (а может и еще как) перезаписывать.

Форум

Справочник

Discord чат

Курсы javascript