JavaScript- HTML element,div,buton,yazı vs. gizleme ve gösterme kodu kullanımı örneği (JavaScript- HTML element,div,button,text etc. hide and show code usage example)

Html elementlerini gizleme gösterme işlemleri 2 farklı şekilde yapılabilmektedir. “display” ve “visibility”.
“display” ile gizleme işleminde ilgili etiket ekranda yer kaplamaz ancak
“visibility” ile gizleme işleminde ise ilgili etiket ekrandaki boyutu kadar boşluk olarak yer kaplar.

Element Gizleme

<div id="displayDivId" style="display: none;"></div>
<div id="visiblityDivId" style="visibility: hidden;"></div>

Element Gösterme

<div id="displayDivId" style="display: block;"></div>
<div id="visiblityDivId" style="visibility: visible;"></div>

JavaScript Div Gizleme fonksiyonu

document.getElementById(divId).style.display="none";

JavaScript Div Gösterme fonksiyonu

document.getElementById(divId).style.display="block";

JavaScript Örneği Kodu

<!DOCTYPE html>
<html>
<head>
	<title>javascript hide show example | javascript gizleme gösterme örneği | www.yazilimcity.net</title>
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

	<script type="text/javascript"  id="javascriptHidingScript" language="javascript">
		var status = "showing";
		function toggle(param) {
			if(status == "showing") {
				hideDiv();
			} else if (status == "hiding"){
				showDiv();
			} else {
				alert("bilinmeyen bir işlem");
			}
		}

		//hide html tag
		function hideDiv() {
			if("hiding" == status) {
				alert("zaten gizli durumda");
			} else {
				var javascriptDivObject=document.getElementById("javascriptDiv");
				javascriptDivObject.style.display="none";
				status = "hiding";
			}
		}

		//show html tag
		function showDiv() {
			if("showing" == status) {
				alert("zaten görünür durumda");
			} else {
				var javascriptDivObject=document.getElementById("javascriptDiv");
				javascriptDivObject.style.display="block";
				status = "showing";
			}
		}

		function toggleVisibility(id) {
			var element = document.getElementById(id);
			if(element.style.visibility == 'visible') {
				element.style.visibility = 'hidden';
			} else {
				element.style.visibility = 'visible'
			}
		}

		function toggleDisplay(id) {
			var element = document.getElementById(id);
			if(element.style.display == 'block') {
				element.style.display = 'none';
			} else {
				element.style.display = 'block'
			}
		}
	</script>
</head>

<body>

	<!--hide html tag-->
	<button id="hideJavascriptDivBtn" onclick="hideDiv();">gizle</button>
	<!--show html tag-->
	<input type="button" id="showJavascriptDivBtn" value="göster" onclick="showDiv();"/>
	<!--toggle operation-->
	<a href="javascript:toggle();">görünürlüğünü değiştir</a>

	<div id="javascriptDiv" style="background-color: #00ced1; display: block;">gizleme gösterme işlemi yapılacak olan html etiketi</div>
	<br>
	<br>
	<button onclick="toggleVisibility('visibilityId')">gizle-göster visibility</button>
	<div id="visibilityId">visibility</div>
	<br>	
	<br>
	<button onclick="toggleDisplay('displayId')">gizle-göster display</button>
	<div id="displayId">display</div>
	<br>

	<footer>
		<b>
			<address>
				<a href="http://www.yazilimcity.net">www.yazilimcity.net</a>
			</address>
		</b>
	</footer>
</body>
</html>

Gerçek Zamanlı JQuery Örneği




    javascript hide show example | javascript gizleme gösterme örneği | www.yazilimcity.net
    
 
    

 

 
    
    
    
    
    
    görünürlüğünü değiştir
 
    
gizleme gösterme işlemi yapılacak olan html etiketi


visibility


display

Share on Facebook0Tweet about this on TwitterShare on Google+0Share on StumbleUpon0Share on Reddit0

Leave a Reply


*