Псевдоселекторы
Почему, если я задаю .style.backgroundColor элементу, то на него перестают действовать псевдоселекторы сss, которые так же должны изменять фон при наведении/активации и т.д.?
По идеи, оно перезаписывает и псевдоселекторы. Тогда как этого избежать? Каждый раз снова прописывать .onmouseover и т.д, что ли? Но это совсем не ок. |
тестовый пример
свойство style имеет больший приоритет и не связано с заданием стилей в тегах style |
<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>
|
Факт есть факт
Тогда наверное только изменять значения в самих тегах style: либо обращаться к cssRule, либо выносить правило в отдельные теги style и менять их inner |
bes,
Хм. Жаль. Ну ладно, спасибо. |
<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>
|
Aetae,
О. Вот как все просто-то. |
Aetae,
PashPP, используется !important что не гуд;) |
В случае в hover - вполне оправдано.
|
ну да, про усиление приоритета я сегодня не вспомнил :)
|
Aetae,
ничего не оправдано, !important лучше не использовать, так как вдруг прописываешь правило, к примеру
div:hover{
background-color:rgba(111, 222, 55, 0.3)
}
и... нихрена не работает и в чем проблема? - может случится такая фигня ИМХО |
Aetae,
можно использовать setProperty ;) :
<!DOCTYPE HTML>
<html>
<head>
<style>
div:hover{
background-color:orange;
}
</style>
</head>
<body>
<div id="lol">dadf</div>
<script>
var k = document.getElementById("lol");
k.style.setProperty("color","rgba(111, 222, 55, 0.8)", "");
</script>
</body>
</html>
P.S. кстати это и есть то про что говорил bes - это CSSRule |
| Часовой пояс GMT +3, время: 09:25. |