Форум

PashPP · #1 (**permalink**) 23.09.2012, 13:45

Почему, если я задаю .style.backgroundColor элементу, то на него перестают действовать псевдоселекторы сss, которые так же должны изменять фон при наведении/активации и т.д.?
По идеи, оно перезаписывает и псевдоселекторы. Тогда как этого избежать?
Каждый раз снова прописывать .onmouseover и т.д, что ли?
Но это совсем не ок.

bes · #2 (**permalink**) 23.09.2012, 14:33

тестовый пример
свойство style имеет больший приоритет и не связано с заданием стилей в тегах style

PashPP · #3 (**permalink**) 23.09.2012, 14:51

<style>
#h:hover {
background-color: green;
}
</style>
<body>
<div id='h'> HHHHH </div>
<script type='text/javascript'>
var f = document.getElementById('h');

f.onclick = function() { f.style.backgroundColor = 'red'; }
</script>
</body>

bes · #4 (**permalink**) 23.09.2012, 14:58

Факт есть факт
Тогда наверное только изменять значения в самих тегах style: либо обращаться к cssRule, либо выносить правило в отдельные теги style и менять их inner

PashPP · #5 (**permalink**) 23.09.2012, 15:05

bes,
Хм. Жаль. Ну ладно, спасибо.

Aetae · #6 (**permalink**) 23.09.2012, 15:12

<style>
#h:hover {
background-color: green !important;
}
</style>
<body>
<div id='h'> HHHHH </div>
<script type='text/javascript'>
var f = document.getElementById('h');
 
f.onclick = function() { f.style.backgroundColor = 'red'; }
</script>
</body>

PashPP · #7 (**permalink**) 23.09.2012, 15:15

Aetae,
О. Вот как все просто-то.

Dim@ · #8 (**permalink**) 23.09.2012, 16:04

Aetae,
PashPP,
используется !important что не гуд

Aetae · #9 (**permalink**) 23.09.2012, 16:14

В случае в hover - вполне оправдано.

bes · #10 (**permalink**) 23.09.2012, 16:17

ну да, про усиление приоритета я сегодня не вспомнил

Форум

Справочник

Discord чат

Курсы javascript