JavaScript / !imporant css

pytanie zadane 7 listopada 2018 w JavaScript przez Scypyon Gaduła (3,450 p.)

.nav
{
  height: 60vh;
  background-color: white;
  width: 100%;
  position: fixed;
  z-index: 8;
  text-decoration: none;
  text-align: center;
  -webkit-box-shadow: 0px 18px 42px -11px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 18px 42px -11px rgba(0,0,0,0.75);
  box-shadow: 0px 18px 42px -11px rgba(0,0,0,0.75);
  display: none;
}

.fa-bars
{
  position: fixed;
  top: 4%;
  right: 6%;
  z-index: 9;
  color: black;
  font-size:3rem;
}

.fa-times
{
  position: fixed;
  top: 4%;
  right: 6%;
  z-index: 9;
  color: black;
  font-size:3rem;
  display: none!important;
}

<nav>
      <i class="fas fa-bars" aria-hidden="true"></i>
      <i class="fas fa-times" aria-hidden="true"></i>
      <img class="logo" src="img/logo6.png" alt="Moje Logo HEHE">
      <div class="nav">
        <ul>
						<li><a class="nav-li" id="link1" href="#">Kilka słów o Mnie</a></li>
						<li><a class="nav-li" id="link2" href="#">Technologie, które znam</a></li>
						<li><a class="nav-li" id="link3" href="#">Moje Projekty</a></li>
						<li><a id="link4" href="#">Kontakt</a></li>
				</ul>
      </div>
    </nav>

const hamburger = document.querySelector(".fa-bars");
const x = document.querySelector(".fa-times");

hamburger.addEventListener("click",function(){
  document.querySelector(".nav").style.display = "block";
  hamburger.style.display = "none";
  x.style.setProperty( 'display', 'none', 'important' );

});

Moje pytanie brzmi, jak w JavaScript złamać "!important" próbowałem setProperty("display""none""imporant"); ale nic nie pomaga

1	komentarz 7 listopada 2018 przez ScriptyChris Mędrzec (190,190 p.) Chcesz na klik ustawić display: none !important na elemencie .fa-times, który w CSS ma już to ustawione?

1 odpowiedź

odpowiedź 7 listopada 2018 przez Bosswell Nałogowiec (36,470 p.)

To nie działa ?

x.style.display = "none !important";

komentarz 7 listopada 2018 przez Scypyon Gaduła (3,450 p.)

Też mnie to dziwi... ale nie działa

komentarz 7 listopada 2018 przez Scypyon Gaduła (3,450 p.)

Mogę wrzucić całą stronę w razie czego, a muszę mieć important ,bo też nie wiem czemu samo "none" w css nie działa, z important już działa

komentarz 7 listopada 2018 przez Bosswell Nałogowiec (36,470 p.)

x.style.cssText = "display: none !important";

komentarz 7 listopada 2018 przez Scypyon Gaduła (3,450 p.)

Nadal element ukryty :/

komentarz 7 listopada 2018 przez Scypyon Gaduła (3,450 p.)

Nie ukryty*

komentarz 7 listopada 2018 przez Bosswell Nałogowiec (36,470 p.)

Sprawdź konsole czy nie masz tam jakiś errorów.

Wydaję mi się że dopiero po onclicku musisz odszukać i pobrać "uchwyty" do tych elementów.

hamburger.addEventListener("click",function(){
  const hamburger = document.querySelector(".fa-bars");
  const x = document.querySelector(".fa-times");

  x.style.cssText = "display: none !important";
});