Ajax การใช้ Visibility และ Display แสดง/ซ่อน Element

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderators: mindphp, ผู้ดูแลกระดาน

Post Reply
User avatar
M009
PHP Super Member
PHP Super Member
Posts: 205
Joined: 23/04/2013 10:57 am

Ajax การใช้ Visibility และ Display แสดง/ซ่อน Element

Post by M009 » 10/05/2013 10:52 am

visibility จะเป็นการซ่อนแบบคง layout ไว้

Code: Select all

document.getElementById('table1').style.visibility = 'visible';
document.getElementById('table1').style.visibility = 'hidden';
Display จะเป็นการซ่อนในส่วนของ layout ด้วย

Code: Select all

document.getElementById('table2').style.display = '';
document.getElementById('table2').style.display = 'none';
ตัวอย่าง

Code: Select all

<html>
   <script language="JavaScript">
      
      function fncShow1()
      {
         document.getElementById('table1').style.visibility = 'visible';
      }

      function fncHide1()
      {
         document.getElementById('table1').style.visibility = 'hidden';
      }
      
      function fncShow2()
      {
         document.getElementById('table2').style.display = '';
      }

      function fncHide2()
      {
         document.getElementById('table2').style.display = 'none';
      }
   </script>
<style>
	.box{
		width : 300px ;
		height : 100px ;
		border:2px solid;
	}
</style>
<body>
	<h1>Visibility</h1>
  <div id="table1" class="box" >Test Visibility</div>
          <input name="btnShow1" id="btnShow1" type="button" value="Show" onClick="JavaScript:fncShow1();">
          <input name="btnHide1" id="btnHide1" type="button" value="Hide" onClick="JavaScript:fncHide1();">
		<br/>
		<hr/>
		<h1>Display</h1>
  <div id="table2" class="box">Test Display</div>
          <input name="btnShow2" id="btnShow2" type="button" value="Show" onClick="JavaScript:fncShow2();">
          <input name="btnHide2" id="btnHide2" type="button" value="Hide" onClick="JavaScript:fncHide2();">
</body>
</html>
การแสดงผล
tvd2.png
tvd2.png (26.07 KiB) Viewed 528 times

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Share Knowledge”

Who is online

Users browsing this forum: No registered users and 22 guests