html - Change CSS attribute with TypeScript and Angular

Question

I want to change the z-index CSS attribute from the <footer> when <select> is open, but i don't know how to do it on TypeScript (Angular 10). The footer already have z-index: 9998; but i want to set it to 0;. The reason is because when my select is open, the options go under the footer and the user can't really choose.

$('.test').on('click', () => {
  $('footer').css('z-index', '0');
})

<select
  class="test"
  placeholder="select an option"
  formControlname="bank">
  
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  
</select>

标签： htmlcssangulartypescriptfunction

Answer 1

There you go, it works just fine as soon as you click the select. The footer z-index is set to 0. Make sure you are importing jquery in your code.

$('.test').on('click', () => {
  $('footer').css('z-index', '0');
})

footer {
  z-index: 9998;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="test" placeholder="select an option" formControlname="bank">

  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>

</select>

<footer>footer</footer>