Как изменить стиль псевдо-класса с помощью JavaScript?
этот пример, для простоты, просто иллюстрация того, что мне нужно сделать. Скажем, у меня есть элемент, стиль которого задан в CSS. Стиль задается как для элемента, так и для псевдокласса, скажем element:hover. Я могу переопределить стиль для элемента со следующим JavaScript: элемент.стиль.setProperty ("имя свойства", "новое значение","). Как изменить стиль псевдокласса с помощью JavaScript?
спасибо.
<html>
<head>
<style type='text/css'>
#myBtn {
background-color: red;
}
#myBtn:hover {
background-color: blue;
}
</style>
</head>
<body>
<button id='myBtn'>Colored button</button>
<button onclick="ChangeColor();">Script button</button>
<script type="application/x-javascript">
function ChangeColor() {
var Btn = document.getElementById('myBtn');
Btn.style.setProperty('background-color', 'green', '');
};
</script>
</body>
</html>
4 ответов
Я бы использовал другой набор правил с дополнительным классом
<html>
<head>
<style type='text/css'>
#myBtn {
background-color: red;
}
#myBtn:hover {
background-color: blue;
}
#myBtn.changed {
background-color: green;
}
#myBtn.changed:hover {
background-color: yellow; /* or whatever you want here */
}
</head>
а то
<script type="application/x-javascript">
function ChangeColor() {
var btn = document.getElementById('myBtn');
btn.className = "changed";
};
</script>
конечно, это имеет смысл только для одного или нескольких различных значений, которые вы хотите иметь свой цвет.
CSS псевдоклассы и псевдо-элементы не являются частью DOM, и поэтому вы не можете изменять их свойства стиля непосредственно с помощью JavaScript.
некоторые динамические псевдоклассы, такие как :hover
могут иметь аналогичные события JavaScript (onmouseover onmouseout
), которые вы можете использовать для изменения стилей, но это не означает, что между ними существует фактическая корреляция.
вы можете возиться с существующими таблицами стилей в IE6+ и большинстве других браузеров.
редактирование существующие правила, но хитрый кросс-браузер.
в этом примере добавляется новое правило (селектор и объявление) к последней таблице стилей в документе.
function addCss(sel, css){
S= document.styleSheets[document.styleSheets.length-1];
var r= (S.cssRules!= undefined)? S.cssRules: S.rules;
if(S.insertRule) S.insertRule(sel+'{'+css+'}',r.length);
else if(S.addRule)S.addRule(sel,css,r.length);
}
addCss('button:hover','background-color:blue;');