Удалить псевдокласс
Здравствуйте
Как удалить псевдоклассы hover и active используя jQuery Так не получается:
$("#submit_bt").removeClass('buttonRED:hover buttonRED:active');
.buttonRED {
background-color: #B61E29;
border: 1px solid #000;
}
.buttonRED:hover {
background-color: #ee5f5b;
}
.buttonRED:active {
background: #ff6;
}
|
rodiony4,
рыть в сторону https://developer.mozilla.org/en-US/...eet/deleteRule |
<style>
.buttonRED {
background-color: #B61E29;
border: 1px solid #000;
width:100px;
}
.buttonRED:hover {
background-color: #ee5f5b;
}
.buttonRED:active {
background: #ff6;
}
</style>
<div class='buttonRED'>Красная кнопка</div>
<button id = 'clear'>Удалить стили</button>
<script>
clear.onclick = function () {
var style = document.querySelector('style');
styleArr = style.textContent.split('}');
for(var i = 0; i<styleArr.length;i++) {
if(styleArr[i].indexOf('buttonRED:hover') > 0 || styleArr[i].indexOf('buttonRED:active') > 0) {
styleArr.splice(i,1);
i--;
}
}
style.textContent = styleArr.join('}');
}
</script>
|
рони, Dilettante_Pro, спасибо!
|
Dilettante_Pro, ваш скрипт работает правильно только для этого конкретного случая... попробуйте
@media all {
.buttonRED:hover, .test {
background-color: #ee5f5b;
}
.buttonRED {
background-color: #B61E29;
border: 1px solid #000;
width:100px;
}
.buttonRED:active {
background: #ff6;
}
}
UPD
<style>
.buttonRED {
background-color: #B61E29;
border: 1px solid #000;
width:100px;
}
.buttonRED:hover {
background-color: #ee5f5b;
}
.buttonRED:active {
background: #ff6;
}
@media all {
.buttonRED:hover, .test {
background-color: #ee5f5b;
}
.buttonRED {
background-color: #B61E29;
border: 1px solid #000;
width:100px;
}
.buttonRED:active {
background: #ff6;
}
}
</style>
<div class="buttonRED">Красная кнопка</div>
<button id="clear">Удалить стили</button>
<script>
clear.onclick = function () {
for(const styleSheet of document.styleSheets) {
process(styleSheet.cssRules)
}
function process(cssRules) {
for(const rule of cssRules) {
if(rule instanceof CSSStyleRule) {
rule.selectorText = rule.selectorText.replace(/\.buttonRED:(hover|active)/g, "#a:not(#b)");
}
if(rule instanceof CSSMediaRule) {
process(rule.cssRules)
}
}
}
}
</script>
Замена на #a:not(#b) является способом не поломать составной и сложный селекторы! |
Malleys,
Вырубание топором
<style>
@media all {
.buttonRED:hover, .test {
background-color: #ee5f5b;
}
.buttonRED {
background-color: #B61E29;
border: 1px solid #000;
width:100px;
}
.buttonRED:active {
background: #ff6;
}
}
</style>
<div class='test'>Test</div>
<div class='buttonRED'>Красная кнопка</div>
<button id = 'clear'>Удалить стили</button>
<script>
clear.onclick = function () {
var style = document.querySelector('style');
style.textContent = style.textContent.replace('buttonRED:hover','empty');
style.textContent = style.textContent.replace('buttonRED:active','empty');
}
</script>
|
Цитата:
Замена на #a:not(#b) является способом не поломать составной и сложный селекторы! Или ещё что-то ломает? А как насчёт .top-buttonRED:hover, которое станет .top-empty? UPD Ваш способ теряет исходный код! UPD 2 Ваш способ ломает аргументы CSS-функции, вам нужно написать парсер, чтобы найти именно селектор! Или используйте CSSOM API! (пост №5) |
| Часовой пояс GMT +3, время: 03:02. |