JavaScript 호 환 IE6 의 접 기 및 펼 치기 효과 인 스 턴 스 구현

4845 단어 JavaScript접다벌리다
이 사례 는 자 바스 크 립 트 가 IE6 를 호 환 하 는 접 기와 전개 효 과 를 실현 하 는 것 을 보 여 준다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
접 는 효과 자 체 를 접 는 것 은 어렵 지 않 지만 div 가 높이 를 초과 하 는 지 는 innerHTML 을 이용 하여 판단 해 서 는 안 됩 니 다.접 을 때 모든 div 의 innerHTML 을 하나의 변수 로 만 들 고 하나의 변수의 내용 을 문자열 을 캡 처 하 는 방식 으로 div 에 넣 습 니 다.다음은 div 자체 의 고유 한 높이 를 통 해 div 가 너무 높 은 지,너무 높 으 면 접 고 접 는 단 추 를 제공 합 니 다.
div 의 높이 는 document.getElement ById("div 의 id").offsetHeight 를 통 해 판단 합 니 다.이 div 의 내용 이 백 엔 드 를 통 해 출력 되 더 라 도 document.getElement ById("div 의 id").offsetHeight 역시 div 의 최종 높이 를 얻 을 수 있 습 니 다.예 를 들 어 다음 코드 와 같 습 니 다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div    </title>
</head>
<body>
<div id="fold" style="border:1px #000 solid;height:100px;overflow:hidden">
  <?php
    echo "<p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p><p>s</p>";
  ?>
</div>
</body>
</html>
<script>
  alert(document.getElementById("fold").offsetHeight);
</script>
실행 결 과 는 다음 과 같 습 니 다.

그럼 저 는 div 의 높이 에 따라 글 을 쓸 수 있 습 니 다.다음 과 같은 효 과 를 냅 니 다.

HTML 레이아웃 은 다음 과 같 습 니 다.id 를 fold 로 하 는 div 로 접 고 펼 칠 내용 을 끼 웁 니 다.그 다음 에 이 id 가 fold 인 div 에 너비 100%단 추 를 놓 고 id 를 more 로 설정 합 니 다.btn 단 추 는 스 크 립 트 에 웹 페이지 를 불 러 오 려 면 판단 을 시작 합 니 다.id 는 fold 의 div 높이 입 니 다.id 가 fold 인 div 의 높이 가 너무 작 으 면 이 id 는 more 입 니 다.btn 단 추 는 표시 할 필요 가 없습니다.동시에 이 내용 의 div 와 button 을 div 에 넣 습 니 다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>div    </title>
  </head>
  <body>
    <div style="border:1px #000 solid;">
      <div id="fold">
        <p>   </p><p>   </p><p>   </p><p>   </p><p>   </p><p>   </p>
        <p>   </p><p>   </p><p>   </p><p>   </p><p>   </p><p>   </p>
      </div>
      <button id="more_btn" style="width:100%" onclick="showmore(this)">    </button>
    </div>
  </body>
</html>
관건 은 다음 웹 스 크 립 트 입 니 다.구체 적 으로 두 부분 으로 나 뉘 는데 일 부 는 웹 페이지 로 딩 부분 입 니 다.단 추 를 누 르 면 표시 되 는 지,div 접 히 는 지 여 부 를 처리 하 는 데 사 용 됩 니 다.또 일 부 는 이벤트 쇼 모어 버튼 을 누 르 는 것 이다.

<script type="text/javascript">
  var div_height=document.getElementById("fold").offsetHeight;
  var fold_flag=0;//       div       ，   0，     
  if(div_height<100){//  div       100px，         
    document.getElementById("more_btn").style.display="none";
  }
  else{// div       100px，        
    document.getElementById("fold").style.overflow="hidden";
    document.getElementById("fold").style.height="100px";
  }
  //id more_btn        ，        ，          ，     obj
  function showmore(obj){
    if (fold_flag == 0) {//    ，   div           ，        
      document.getElementById("fold").style.overflow = "";
      document.getElementById("fold").style.height = "";
      obj.innerHTML="  "//       
      fold_flag=1;//     1，         
    }
    else{//           。
      document.getElementById("fold").style.overflow="hidden";
      document.getElementById("fold").style.height="100px";
      obj.innerHTML="    "
      fold_flag=0;
    }
  }
</script>
단 추 를 사용 하지 않 으 려 면 중간 에 있 는 하이퍼링크 를 설정 할 수 있 습 니 다.
더 많은 자 바스 크 립 트 관련 내용 에 관심 이 있 는 독 자 는 본 사이트 의 주 제 를 볼 수 있다.,,,,,,,,,,
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
위 챗 애플 릿 설정 상단 네 비게 이 션 바 제목 색상 구현 방법
vue 로 다 중 페이지 응용 예시 코드 구축

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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