잠시만 기다려 주세요

     '이태원 150명 넘게 죽은 핼러윈 참사.. 오세훈 탄핵.. 윤석열 탄핵.... 행안부 장관 이상민은 사람이냐... 말만 하면 책임 회피..'
전체검색 :  
이번주 로또 및 연금번호 발생!!   |  HOME   |  여기는?   |  바다물때표   |  알림 (19)  |  여러가지 팁 (1095)  |  추천 및 재미 (163)  |  자료실 (28)  |  
시사, 이슈, 칼럼, 평론, 비평 (791)  |  끄적거림 (142)  |  문예 창작 (719)  |  바람 따라 (75)  |  시나리오 (760)  |  드라마 대본 (248)  |  
살인!

    javascript/jquery

javascript/jquery - display:none 과 visibility:hidden 의 차이
이 름 : 바다아이   |   조회수 : 9815         짧은 주소 : https://www.bada-ie.com/su/?421591797719 
div 태그로 만든 Layer를 안보이게 하는 두가지 방법


1. display:none  <-> block

    아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨


2. visibility:hidden <-> visible

    보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨


3. display = "" 

    하면 디폴트 값이 쓰여지게 되는데 이때 span 태그 안에 있으면 inline
    div 태그 안에 있으면 block 가 쓰여지게 된다.


[출처] http://blog.naver.com/eroicaplus/90036328974


 예제1) display

<script language="javascript">
function view(){
 var f=document.form;
 if(f.type[0].checked==true){
 document.all.cattery.style.display="none";
 }else{
 document.all.cattery.style.display="";
 }
}
</script>

<form name="form" method="post">
<input type="radio" name="type" value="1" onclick="view()" checked>숨기 
<input type="radio" name="type" value="2" onclick="view()">보이기
<div id="cattery" style="display:none;">내용</div>
<div>내용2</div>
</form>



예제2) visibility

<script language="javascript">
function view(){
 var f=document.form;
 if(f.type[0].checked==true){
 document.all.cattery.style.visibility="hidden";
 }else{
 document.all.cattery.style.visibility="visible";
 }
}
</script>

<form name="form" method="post">
<input type="radio" name="type" value="1" onclick="view()" checked>숨기 
<input type="radio" name="type" value="2" onclick="view()">보이기
<div id="cattery" style="visibility:hidden;">내용</div>
<div>내용2</div>
</form>


2차 출처 : http://unabated.tistory.com/entry/displaynone-%EA%B3%BC-visibilityhidden-%EC%9D%98-%EC%B0%A8%EC%9D%B4
| |





      1 page / 3 page
번 호 카테고리 제 목 이름 조회수
77 javascript/jquery 자바스크립트 이미지 확인 함수.... 바다아이 328
76 javascript/jquery 스크롤해도 상단에 고정되는 메뉴 만들기, 스크롤 상단에 레이어 고정. 바다아이 8257
75 javascript/jquery 자바스크립트 스크롤을 문서 화면 상단, 하단으로 이동하기. 스크롤을 시작, 끝으로 이동하기 바다아이 6447
74 javascript/jquery javascript 서버시간 가져오기, 서버날짜 가져오기... 바다아이 8305
73 javascript/jquery 자바스크립트 쿠키 클래스, cookie class 바다아이 8920
72 javascript/jquery select 박스 3단 카테고리 바다아이 9897
71 javascript/jquery 자바스크립트 해당 년월의 마지막 날짜 구하기, 이번달 마지막 일 구하기... 바다아이 9157
70 javascript/jquery 자바스크립트 타임존 변환, timezone, 날짜, 시간 관련 편하게 작업하기... moment.js 바다아이 11869
69 javascript/jquery textarea 의 특정 커서 cursor 위치에 문자 삽입하기. focus, 커서 cursor 위치 구하기... 바다아이 11577
68 javascript/jquery 마우스 블럭(block) 선택한 텍스트 가져오기, 마우스로 웹페이지 본문 선택한 문자만큼 가져오기... 바다아이 9459
67 javascript/jquery textarea 특정 위치에 커서 cursor 를 옮기기, 위치시키기, focus 바다아이 12992
66 javascript/jquery jquery ajax option 옵션 총 정리.... 바다아이 10004
65 javascript/jquery jquery open api 개발, ajax JSONP cross domain 문제, 서로 다른 도메인 문제 해결하기, error 0 문제... sop 문제 바다아이 9620
64 javascript/jquery javascript 자바스크립트 소수점, 자리수, 반올림, 올림, 내림(버림) 바다아이 10614
63 javascript/jquery javascript 현재시각 표시하는 디지털 시계 만들기 (date 객체) 바다아이 10754
62 javascript/jquery CSS3 회전 속성과 javascript를 활용한 아날로그 시계 바다아이 11437
61 javascript/jquery javascript 자바스크립트 쿠키, cookie, 만들기, 저장, 삭제, 가져오기, 얻기 바다아이 10522
60 javascript/jquery javascript 자바스크립트 날짜 계산하는 다양한 방법 바다아이 11243
59 javascript/jquery 자바스크립트 javascript 한/영타 변환기, 한영, 한글, 영어 바다아이 14858
58 javascript/jquery url 인코드, 디코드, encode, decode 예제... 바다아이 9697
57 javascript/jquery javascript 자바스크립트 프레임 페이지 이동... frame location.href 바다아이 15377
56 javascript/jquery File Upload Progress, 파일 업로드 프로그레스바.... 업로드 진행바 구현. 바다아이 10203
55 javascript/jquery 자바스크립트 javascript, json 데이터 이쁘게 출력하기, json Highlight 바다아이 10188
54 javascript/jquery 자바스크립트 javascript json 사용하기, 출력하기, JSON.stringify, JSON.parse, 변환 바다아이 11667
53 javascript/jquery 자바스크립트 javascript innerHTML, innerTEXT 사용 할 때 주의할 점... 바다아이 10194
52 javascript/jquery 자바스크립트 javascript 엔티티 entity 인코딩, 디코딩, encode, decode 바다아이 10506
51 javascript/jquery 자바스크립트 javascript post, get 값 파라미터 받기, 구하기 바다아이 12464
50 javascript/jquery 자바스크립트 text copy, 복사, How to copy a TEXT to Clipboard on a Button-Click 바다아이 10562
49 javascript/jquery jquery autocomplete 자동완성 한글 입력시 문자, 검색어, 창 사라지는 문제. 바다아이 10195
48 javascript/jquery 자바스크립트 javascript, jquery, 검색어 자동완성 기능, autocomplete 바다아이 11228
1
2
3
| |









Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천  실행시간 : 0.13607 초
to webmaster... gogo sea. gogo sea.