Here is the element:

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

In css, write the property when you click to change the background:

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

Then in js we replace the background by ourselves:

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

The code from css stops working (the button does not change when pressed). Why is this happening? Is there a way to set the pseudo-class not through html, but in js (that is, through js to influence the style when pressed)?

    3 answers 3

    Add in 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>

    • Lord, it's so elementary. Thank you - Dmitriy

    js imposes inline styles, they have a high priority. better create a class in css, and in js add it and delete it.

     $('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>

    • How exactly needs to be done? - Dmitriy
    • codepen.io/anon/pen/OQgNbK - DemoGosha
    • @DemoGosha Instead of putting code on external sources, use built-in snippets - Anton Shchyrov

    You forgot units, pixels, apparently.

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

    Similarly in CSS:

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