Переопределение псевдоклассов в js

276
14 февраля 2018, 13:18

Вот элемент:

<button class="nos" id="nos1" onClick="nos(0)"></button>

В css прописываем свойство при нажатии изменять задний фон:

#nos1:active{background-position: -118 -27;}

Затем в js заменяем самостоятельно задний фон:

documet.getElementById('nos1').style.backgroundPosition = "-59 -27"

Код из css перестает работать (кнопка не изменяется при нажатии). Почему происходит так? Есть ли способ задать псевдокласс не через html, а в js (то есть через js влиять на стиль при нажатии)?

Answer 1

Добавьте в CSS !important

function nos(int) { 
  document.getElementById('nos1').style.backgroundColor = "red"; 
}
#nos1:active { 
  background-color: yellow !important; 
}
<button class="nos" id="nos1" onClick="nos(0)">Test</button>

Answer 2

js накладывает inline стили, у них большой приоритет. лучше создайте класс в css, а в js добавляйте его и удаляйте.

$('button').on('click', function(e){ 
  $(e.target).addClass('bgc_red') 
})
.bgc_red{ 
  background-color: blue; 
} 
 
button:active{ 
  background-color: red; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button>Azaza</button>

Answer 3

Вы забыли единицы, пиксели, судя по всему.

documet.getElementById('nos1').style.backgroundPosition = "-59px -27px";

Так же и в CSS:

#nos1:active{
  background-position: -118px -27px;
}
READ ALSO
Разработка алгоритма, обнаруживающего в массиве все пары целых чисел, сумма которых равна заданному значению
javascript

Разработка алгоритма, обнаруживающего в массиве все пары целых чисел, сумма которых равна заданному значению

Напишите программу (на языке JavaScript), которая найдет в массиве все пары целых чисел, сумма которых равна заданному значению

 229
Как реализовать скользящее окно на js?
javascript

Как реализовать скользящее окно на js?

Я пытаюсь решить логическую задачу на js:

 277
JS, возможно ли увеличить радиус клика? [требует правки]
javascript

JS, возможно ли увеличить радиус клика? [требует правки]

В общем, вопрос состоит в заголовке

 279
Vue.js v-for и изменение data
javascript

Vue.js v-for и изменение data

ЗдравствуйтеЕсть такой пример:

 242