Ändern Sie vorhandene CSS mit Javascript

Question

Ich habe zwei divs übereinander, und durch Klicken auf eine Schaltfläche möchten Sie den Z-Index mit einer Funktion auf 100 ändern. Klingt einfach, Hunderte von Beispielen, aber es funktioniert nicht. Allen Beispielen gemeinsam war, dass vor der Implementierung der Funktion kein CSS-Code existierte. Könnte das das Problem sein?

Button:

<button type="button" id="trailerButton" class="btn btn-default btn-sm" style="margin-top: 20px;"> 
    <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span> Choose a trailer 
</button> 

Script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("#trailerButton").click(function() { 
      $("#chooseTrailer").css("z-index", "100"); 
     }); 
    }); 
</script> 

CSS:

position: relative; 
z-index: 1; 

Answer 1

Für z-index zu arbeiten, fügen position: relative oder position: absolute zu css dieses Elements. Oder jquery

$('#trailerButton').click(function() { 
    $('#chooseTrailer').css('z-index', '100'); 
    $('#chooseTrailer').css({ 'position': 'relative' }); 
}); 

Answer 2

Addition mit oben zu beantworten:

$('#trailerButton').click(function() { 
    $('#chooseTrailer').css({ 
       'position':'relative', 
       'z-index':'999999'}); 
}); 

Sie können es tun, indem sie alles in {} Klammern mit : Objekt Notation setzen.

Alternativ können Sie mit cssText versuchen !important zu setzen, aber das wird alles andere CSS für dieses Element überschreiben:

$('#trailerButton').click(function() { 
     $('#chooseTrailer').css({'cssText', 'z-index: 999999 !important'});