Javascript ile bir nesneyi gizlemek

Javascript ile sayfadaki bir nesne nasıl gizlenir?

Başlangıç seviyesi Javascript programlama çalışmalarımıza devam ediyoruz. Daha önceki derste Javascript ile bir yazının font size'ı nasıl değiştirilir? onu görmüştük. Bu derste da yine onclik olayı üzerinden bir örnek ile olayı açıklayalım.

Sayfada var olan bir elemanın gösterilmesi ya da gizlenmesi CSS kodlarından display ve/veya visibility özellikleri kullanılarak yapılır. Bir nesneyi gizlemek için ya

display:none deriz ya da

visibility:hidden kullanırız.

Bu çalışmada biz bu işi Javascript kodları kullanarak yapmak istiyoruz. Çok da lafı uzatmadan sayfadaki nesneyi gizleyen kodu yazıyorum.

document.getElementById('deneme').style.display='none';

Bu kod ne işe yarıyor?

Sayfada id değeri deneme olan nesneyi buluyor ve CSS stil özelliğine display:none değerini atıyor. Böylelikle nesne görünmez oluyor. sayfa kodlarını FireBug ile görüntülediğinizde gizlediğiniz nesnenin aslında hala orada olduğunu görürsünüz. Sadece CSS değerlerinden display özelliği none olduğu için görünmüyor.

Gizlenmiş olan bir nesneyi tekrar görünür hale getirmek için ise şu kod yeterli olacaktır.

document.getElementById('deneme').style.display='block'

Bu kodları aşağıdaki yazı yazıya onclik yani tıklayınca çalışma özelliğine atadığımızda artık çalışır hale geliyor. Tıklayın ve deneyin.

Bana tıkla ve aşağıdaki resmi gizle!

Bana tıkla ve aşağıdaki resmi göster!

Yukarıda anlattıklarımızın düzgünce kodlanmış halini aşağıda veriyorum. Javascript örnek kodunu editörünüzde açtığınız boş bir HTML sayfasına kopyalayın ve nasıl çalıştığını inceleyin.

<!DOCTYPE html>
<html>
<head>
<title>Javasctipy İle Bir Nesneyi Gizlemek</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

<p onclick="document.getElementById('deneme').style.display='none'">Bana tıkla ve aşağıdaki resmi gizle!</p>

<p onclick="document.getElementById('deneme').style.display='block'">Bana tıkla ve aşağıdaki resmi göster!</p>

<img border="0" height="320" src="https://1.bp.blogspot.com/-L0Y9OIZF2ns/V6RO9q_8Y7I/AAAAAAAAAus/dcnPxrvvWOI87-rMo-U0MlibNP4OCc2sQCLcB/s320/learn-jscript.jpg" width="320" id="deneme" />

</body>
</html>

Evet bu seferlik bu benden bu kadar. Umarım sizin için faydalı olabilmişimdir. Fikir ve görüşlerinizi yorum olarak yazarsanız beni çok mutlu eresiniz.

Unutmayın!

Front-End Goods

Sayfalar

5 Ağustos 2016 Cuma