Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][CSS]Zmiana właściwości CSS za pomocą JS
Tauri
post 11.09.2016, 11:53:58
Post #1





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 9.05.2012

Ostrzeżenie: (0%)
-----


Witam koderów.


Mam problem ze zmianą właściwości CSS poprzez funkcję JS. Funkcję wywołuję w formularzu:
  1. <input type="checkbox" onchange="if (this.checked) {show_field();}else{hide_field();}" />


Same funkcje są w head i mają postać:

  1. function show_field()
  2. {
  3. document.querySelector(".sh1").style.display="";
  4. }
  5.  
  6.  
  7. function hide_field()
  8. {
  9. document.querySelector(".sh1").style.display="none";
  10. }


Zadaniem funkcji jest ukrycie elementów formularza w postaci wiersza tabeli:

  1. <tr class="sh1"><td>NIP</td><td><input type="text ... /></td></tr>


Problem polega na tym, że jeśli zdefiniuję klasę ".sh1"w pliku css lub bezpośrednio w pliku html to wywoływane funkcje nie działają. Funkcje są wykonywane ale żadne pola nie są ukrywane. Gdy znów usunę definicję to jest OK. W czym jest problem questionmark.gif. Dodam jeszcze że domyślnie pola są ukryte, tak więc w definicji klasy CSS powinno być display=none; Gdyby oczywiście działało.
Go to the top of the page
+Quote Post
trueblue
post 11.09.2016, 12:21:49
Post #2





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Pokaż jak wygląda definicja klasy .sh1 w css.


--------------------
Go to the top of the page
+Quote Post
Tauri
post 11.09.2016, 22:11:15
Post #3





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 9.05.2012

Ostrzeżenie: (0%)
-----


Po wielu próbach zostawiłem tylko tę opcję na której mi zależy. Czyli pola domyślnie niewidoczne.


  1. .sh1
  2. {
  3. display:none;
  4. }


No i są niewidoczne ale funkcje nie mogą zmienić tej właściwości.

Go to the top of the page
+Quote Post
trueblue
post 12.09.2016, 06:52:01
Post #4





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


  1. document.querySelector(".sh1").style.display="table-row";


--------------------
Go to the top of the page
+Quote Post
Lion
post 12.09.2016, 07:45:46
Post #5





Grupa: Zarejestrowani
Postów: 148
Pomógł: 14
Dołączył: 23.02.2013

Ostrzeżenie: (0%)
-----


Sprawdź także czy element na którego ukryciu Ci zależy jest pierwszym elementem z daną klasą CSS w dokumencie.


--------------------
Go to the top of the page
+Quote Post
Tauri
post 13.09.2016, 17:53:31
Post #6





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 9.05.2012

Ostrzeżenie: (0%)
-----


Dzięki już działa. smile.gif . Brakowało tylko właściwości: display określonej jako table-row w funkcji wyświetlającej pola.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 20.05.2025 - 04:20