Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript] ukrywanie "SearchBox" i/lub "link"
czezz
post
Post #1





Grupa: Zarejestrowani
Postów: 141
Pomógł: 0
Dołączył: 24.07.2003

Ostrzeżenie: (10%)
X----

Witam,
wiem, że za pomocą JavaScript można ukryć niektóre elementy strony.
Czy mogę poprosić kogoś o przykład na poniższym kodzie ?

Chciałbym ukryć "search box" i/lub link: "Advanced search"
Próbowałem wykonać coś takiego:

document.getElementsByClassName("searchContainer").style.display = 'none' oraz document.getElementById("searchContainer").style.display = 'none'
W obu przypadkach nic to jednak nie pomagało.
Być może funkcja jest OK, tylko trzeba coś jeszcze dodać ?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. <title></title>
  5.  
  6. </head>
  7. <body>
  8. <form method="get" action="arenden_sok.asp?boid=1" target="main" name="search" ID="Form1" onsubmit="java script:DispActionIcon(1);">
  9. <input type="hidden" name="boid" value="1" ID="Hidden1">
  10. <table class="searchContainer" width="100%">
  11.     <tr>
  12.         <td></td>
  13.         <td><input type="search" placeholder="Search case" name="sokord" ID="Text1" style="width:120px;" class="input"></td>
  14.     </tr>
  15. </table>
  16. <table class="meny">
  17.  
  18.     <tr>
  19.         <td><a class="img" href="arenden_meny.asp?boid=1&avsok=0" ><img src="/common/images/1.gif" border="0"></a></td>
  20.         <td><a href="arenden_meny.asp?boid=1&avsok=0" onclick="parent.frames.main.location='/admin/arenden_avsok.asp?boid=1'">Advanced search</a></td>
  21.     </tr>
  22.  
  23.   <tr>
  24.     <td><img src="/common/images/dot.gif" border="0"></td>
  25.     <td><a href="/common/arenden.asp?boid=1" target="main">View</a></td>
  26.   </tr>
  27.   <tr>
  28.     <td><img src="/common/images/dot.gif" border="0"></td>
  29.     <td><a href="arenden_installningar.asp?boid=1" target="main">Options</a></td>
  30.   </tr>
  31. </table>
  32.  
  33. </form>
  34. </body>
  35. </html>
[HTML] pobierz, plaintext


Ten post edytował czezz 10.08.2015, 16:27:00
Go to the top of the page
+Quote Post
Comandeer
post
Post #2





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

Kod
document.getElementsByClassName("searchContainer")

Jak sama nazwa funkcji mówi, zwracana są elementy, a więc obiekt pseudotablicowy. Zatem możesz pobrać 1. element z niego i dla niego przypisać style:
Kod
document.getElementsByClassName("searchContainer")[0].style.display = 'none';

W tym wypadku jednak IMO lepiej się sprawdzi document.querySelector:
Kod
document.querySelector(".searchContainer").style.display = 'none';


Osobiście jednak wydaje mi się, że zamiast bezpośrednio operować na stylach, to lepiej jest operować na klasach elementu (a więc na jego stanie).
Go to the top of the page
+Quote Post
czezz
post
Post #3





Grupa: Zarejestrowani
Postów: 141
Pomógł: 0
Dołączył: 24.07.2003

Ostrzeżenie: (10%)
X----

Bardzo dziękuję za odpowiedź.
Obia podane przykłady działają świetnie na podanym przykładowym kodzie html.

Jeśli jednak, spróbuję wykonać tą samą operację na pełnym kodzie na moim serwerze, używając w Firefox: F12 > console > 

[PHP] pobierz, plaintext 
  1. document.getElementsByClassName("searchContainer")[0].style.display = 'none';
  2. TypeError: document.getElementsByClassName(...)[0] is undefined
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. document.querySelector(".searchContainer").style.display = 'none';
  2. TypeError: document.querySelector(...) is null
[PHP] pobierz, plaintext


W pierwszym przypadku coś jest niezdefiniowane a w drugim ma wartość zerową. O czym zapomniałem ?

Ten post edytował czezz 10.08.2015, 23:04:22
Go to the top of the page
+Quote Post
Comandeer
post
Post #4





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

Odpalasz to w head? Jeśli tak, to musisz to odpalić przy DOMContentLoaded: https://developer.mozilla.org/en-US/docs/We...OMContentLoaded

Taki błąd się odpala jeśli chcemy użyć kodu na elementach, które jeszcze nie istnieją.
Go to the top of the page
+Quote Post
czezz
post
Post #5





Grupa: Zarejestrowani
Postów: 141
Pomógł: 0
Dołączył: 24.07.2003

Ostrzeżenie: (10%)
X----

Nie.

Do testu użyłem metody Firefox: F12 > Console > document.getElementsByClassName("searchContainer")[0].style.display = 'none'; - to zadziałało.
Jeśli dodam do kodu HTML, wszystko jedno gdzie poniżse to nie działa:
[PHP] pobierz, plaintext 
  1. <script src="fflimit.js" language="javascript" type="text/javascript"></script>
[PHP] pobierz, plaintext

lub
[PHP] pobierz, plaintext 
  1. <script>document.getElementsByClassName("searchContainer")[0].style.display = 'none';</script>
[PHP] pobierz, plaintext


Ten post edytował czezz 11.08.2015, 12:11:30
Go to the top of the page
+Quote Post
Comandeer
post
Post #6





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

Ah, Ty to wykonujesz w konsoli i tam Ci nie znajduje elementów? Dziwne. Ale chyba wiem na czym problem polega: ta wyszukiwarka jest w jakiejś ramce?

A jak dodasz to na końcu body też nie działa?
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 13.10.2025 - 10:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn