버튼을 클릭하여 숨기고 표시하는 전환 코드를 실현합니다

4036 단어
버튼을 클릭하여 숨기고 표시하는 전환 코드를 실현한다. 많은 응용 프로그램에서 이런 기능이 있다. 같은 단추를 누르면 한 요소의 표시와 숨기는 전환을 실현할 수 있다. 다음은 코드 실례를 통해 이 효과를 어떻게 실현하는지 소개한다. 코드는 다음과 같다.
  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>    </title>
<style type="text/css">
#thediv
{
  width:200px;
  height:100px;
  line-height:100px;
  text-align:center;
  background-color:green;
}
</style>
<script type="text/javascript">
function Show_Hidden(obj)
{
  if(obj.style.display=="block")
  {
    obj.style.display='none';
  }
  else
  {
    obj.style.display='block';
  }
}
window.onload=function()
{
  var olink=document.getElementById("link");
  var odiv=document.getElementById("thediv");
  olink.onclick=function()
  {
    Show_Hidden(odiv);
    return false;
  }
}
</script>
</head>
<body>
<a href="#" id="link">  \    </a>
<div id="thediv" style="display:block">       </div>
</body>
</html>

 
상기 코드는 우리의 요구를 실현했습니다. 맨 위 링크를 클릭하면div 디스플레이와 숨겨진 전환을 실현할 수 있습니다. 다음은 이 코드의 실현 과정을 소개합니다.하나.실현 원리: 링크를 위해 onclick 이벤트 처리 함수를 등록합니다. 이 처리 함수는div의 스타일을 판단할 수 있습니다.디스플레이 속성 값, Block이면 none, 즉 div를 숨김 상태로 설정하고, 그렇지 않으면 Block, 즉 div를 디스플레이 상태로 설정하는 원리는 대체로 이렇다.특히 주의해야 할 것은div에서 스타일="display:block"을 사용하는 목적은obj.style.display 문장은 속성 값을 얻을 수 있습니다. 그렇지 않으면 첫 번째 클릭에서div를 숨길 수 없습니다. 스타일 = "display:block"을 제거하고 테스트를 할 수 있습니다.return false 문장은 링크의 점프 효과를 방지하기 위해서입니다.둘.1.returnfalse는javascript에서returnfalse의 작용이 무엇인지를 참고할 수 있습니다. 2.getElementById() 함수는 document을 참조할 수 있습니다.getElementById () 사용법은 한 장을 상세하게 설명한다. 
원래 주소:http://www.softwhy.com/forum.php?mod=viewthread&tid=11714
자세한 내용은 다음을 참조하십시오.http://www.softwhy.com/javascript/
왜 내가 코드를 수직으로 정렬해야 하는지 (너도 그래야지!)
[기초 공부] JVM 정리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage