Forum PHP.pl > [JavaScript] ukrywanie "SearchBox" i/lub "link"

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] ukrywanie "SearchBox" i/lub "link"

czezz

10.08.2015, 16:25:31

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 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
 
</head>
<body>
<form method="get" action="arenden_sok.asp?boid=1" target="main" name="search" ID="Form1" onsubmit="java script:DispActionIcon(1);">
<input type="hidden" name="boid" value="1" ID="Hidden1">
<table class="searchContainer" width="100%">
    <tr>
        <td></td>
        <td><input type="search" placeholder="Search case" name="sokord" ID="Text1" style="width:120px;" class="input"></td>
    </tr>
</table>
<table class="meny">
 
    <tr>
        <td><a class="img" href="arenden_meny.asp?boid=1&avsok=0" ><img src="/common/images/1.gif" border="0"></a></td>
        <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>
    </tr>
 
  <tr>
    <td><img src="/common/images/dot.gif" border="0"></td>
    <td><a href="/common/arenden.asp?boid=1" target="main">View</a></td>
  </tr>
  <tr>
    <td><img src="/common/images/dot.gif" border="0"></td>
    <td><a href="arenden_installningar.asp?boid=1" target="main">Options</a></td>
  </tr>
</table>
 
</form>
</body>
</html>
[HTML] pobierz, plaintext

Comandeer

10.08.2015, 16:57:57

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).

czezz

10.08.2015, 20:13:17

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 
document.getElementsByClassName("searchContainer")[0].style.display = 'none';
TypeError: document.getElementsByClassName(...)[0] is undefined
[PHP] pobierz, plaintext

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

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

Comandeer

10.08.2015, 21:56:26

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ą.

czezz

10.08.2015, 23:15:33

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 
<script src="fflimit.js" language="javascript" type="text/javascript"></script>
[PHP] pobierz, plaintext

lub

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

Comandeer

11.08.2015, 12:58:55

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?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.