Вход

Просмотр полной версии : Менять css media

cherrypashka
08.06.2017, 15:07
Здравствуйте! Подскажите, пожалуйста, могу я менять при помощи javascript свойства css только для определенного media?
j0hnik
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
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
08.06.2017, 16:43
при помощи javascript свойства css только для определенного media?
Т.е. тот media уже есть, но нужно в нем чего-то поменять?

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

А вот как найти и поменять часть текстовой информации - это уже другая задача. ;)
j0hnik
08.06.2017, 17:41
.innerHTML +=
Стили допишутся в конец и соответственно "перезапишут" существующие, ну то есть будут выполнятся т.к они в конце.
но чтобы не разводить болото, конечно лучше менять текущие значения, если они существуют. а для этого надо получить слили и через регулярки/массивы (а может и еще как) перезаписывать.