웹 프론트엔드 JS 튜토리얼 js를 사용하여 CSS 속성을 조작하여 div layer_javascript 기술의 확장 및 닫기 효과를 얻는 방법

js를 사용하여 CSS 속성을 조작하여 div layer_javascript 기술의 확장 및 닫기 효과를 얻는 방법

May 16, 2016 pm 04:00 PM
CSS 속성 js

이 기사의 예에서는 js를 사용하여 CSS 속성을 조작하여 div 레이어의 확장 및 닫기 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

최근 JavaScript를 배우고 CSS 속성에 대한 JS 작업을 접하게 되어 확장 및 닫기 효과를 작성하는 동시에 버튼 텍스트 전환도 구현했는데 매우 간단합니다! 이 Js 객체는 CSS 속성을 작동하여 div 레이어의 확장 및 닫기 효과를 얻습니다. JS 프런트엔드 디자이너와 코드를 공유하세요.

<title>js操作div展开关闭</title>
<style>
  #jb51 { border: solid 1px #EEE; 
    background:#F7F7F7; 
    margin:20px; 
    padding:10px; 
    display:none;
    width:300px;    
  }
</style>
<input style="cursor:pointer" onclick="show('jb51');"
type='button' value='展开' id='inp'>
<div id="jb51">脚本之家提供编程源码、网站源码、网页素材、
书籍教程、网站模板、网页特效代码等!</div>
<script>
function show(id){
  var aiin = document.getElementById(id);
  var inp= document.getElementById('inp');
  if(aiin.style.display != 'block'){
    aiin.style.display = 'block';
    inp.value='关闭';
  }else{
    aiin.style.display = 'none';  
    inp.value='展开';
  }
}
</script>
로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. 주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요. Dec 17, 2023 pm 06:55 PM

주식 분석을 위한 필수 도구: PHP 및 JS를 사용하여 캔들 차트를 그리는 단계를 알아보세요.

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기 Dec 18, 2023 pm 03:39 PM

PHP 및 JS 개발 팁: 주식 캔들 차트 그리기 방법 익히기

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법 Dec 17, 2023 am 08:08 AM

PHP와 JS를 사용하여 주식 촛대 차트를 만드는 방법

Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해 Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해 Mar 15, 2024 pm 04:51 PM

Angular 구성 요소 및 해당 표시 속성: 비블록 기본값 이해

CSS에서 그루브는 무엇을 의미합니까? CSS에서 그루브는 무엇을 의미합니까? Apr 28, 2024 pm 04:12 PM

CSS에서 그루브는 무엇을 의미합니까?

js와 vue의 관계 js와 vue의 관계 Mar 11, 2024 pm 05:21 PM

js와 vue의 관계

HTML 점선 테두리를 설정하는 방법 HTML 점선 테두리를 설정하는 방법 Apr 05, 2024 am 09:36 AM

HTML 점선 테두리를 설정하는 방법

See all articles