잠시만 기다려 주세요

HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (888)  |  추천 및 재미 (154)  |  자료실 (20)  |  끄적거림 (520)  |  시나리오 (760)  |  드라마 대본 (248)  |  

2020년 09월 25일
원하는대로 되어가지 않는다고 해서 짜증낼 필요는 없다. 모든 것은 다 때가 있고 그 때를 위해 기다릴 줄도 알아야 한다. - 바다아이
 




    javascript/jquery

javascript/jquery - display:none 과 visibility:hidden 의 차이
이 름 : 바다아이   |   조회수 : 2251         짧은 주소 : 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
번 호 카테고리 제 목 이름 조회수
74 javascript/jquery javascript , ... 바다아이 269
73 javascript/jquery , cookie class 바다아이 819
72 javascript/jquery select 3 바다아이 1221
71 javascript/jquery , ... 바다아이 1751
70 javascript/jquery , timezone, , ... moment.js 바다아이 1884
69 javascript/jquery textarea cursor . focus, cursor ... 바다아이 1809
68 javascript/jquery (block) , ... 바다아이 1749
67 javascript/jquery textarea cursor , , focus 바다아이 2354
66 javascript/jquery jquery ajax option .... 바다아이 1965
65 javascript/jquery jquery open api , ajax JSONP cross domain , , error 0 ... sop 바다아이 2023
64 javascript/jquery javascript , , , , () 바다아이 2120
63 javascript/jquery javascript (date ) 바다아이 2206
62 javascript/jquery CSS3 javascript 바다아이 2383
61 javascript/jquery javascript , cookie, , , , , 바다아이 2284
60 javascript/jquery javascript 바다아이 2599
59 javascript/jquery javascript / , , , 바다아이 2819
58 javascript/jquery url , , encode, decode ... 바다아이 2101
57 javascript/jquery javascript ... frame location.href 바다아이 2210
56 javascript/jquery File Upload Progress, .... . 바다아이 2555
55 javascript/jquery javascript, json , json Highlight 바다아이 2567
54 javascript/jquery javascript json , , JSON.stringify, JSON.parse, 바다아이 2656
53 javascript/jquery javascript innerHTML, innerTEXT ... 바다아이 2394
52 javascript/jquery javascript entity , , encode, decode 바다아이 2697
51 javascript/jquery javascript post, get , 바다아이 3903
50 javascript/jquery text copy, , How to copy a TEXT to Clipboard on a Button-Click 바다아이 2771
49 javascript/jquery jquery autocomplete , , . 바다아이 2535
48 javascript/jquery javascript, jquery, , autocomplete 바다아이 2872
47 javascript/jquery substring, substr, indexOf, lastIndexOf (javascript , , ) 바다아이 2628
46 javascript/jquery Javascript event.keyCode , , ACSII 바다아이 2272
45 javascript/jquery url encode decode , , , javascript 바다아이 3482
| |








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