Менять css media
Здравствуйте! Подскажите, пожалуйста, могу я менять при помощи javascript свойства css только для определенного media?
|
<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>
Так например |
если тег стайл есть, можно так
<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>
|
Цитата:
Как читать и менять все содержимое тега style уже показал j0hnik. А вот как найти и поменять часть текстовой информации - это уже другая задача. ;) |
.innerHTML +=
Стили допишутся в конец и соответственно "перезапишут" существующие, ну то есть будут выполнятся т.к они в конце. но чтобы не разводить болото, конечно лучше менять текущие значения, если они существуют. а для этого надо получить слили и через регулярки/массивы (а может и еще как) перезаписывать. |
| Часовой пояс GMT +3, время: 12:47. |