HTML CSS JS) visibility:hidden document.all.prev.style.visibility="hidden";

1) visibility:hidden

실제로 존재하지만 보이지 않지만 공간은 존재한다. <-> display:none

사용법

html

<div class="div1"></div>
<div class="div2"></div>

css

div{
  width:100px;
  height:100px;
  border: 4px red solid;
}
.div1{
  visibility:hidden;
}

출력결과

현업활용

대게 조건문을 활용해서 구현 할 것으로 예상

js

document.all.(className).style.visibility="hidden"

 

예제

html

<svg-icon
	id="prev"
/>
<svg-icon
	id="next"
/>

js

prev() {
  if(Num > 1) Num-- // 1보다 작을 경우 예외처리
  if(Num === 1)  document.all.prev.style.visibility="hidden";	//0보다 작을경우 아이콘 안보이게
},
next() {
  if(Num < MaxNum) Num++ // 최대 개수보다 커질경우 예외처리
  if(Num === MaxNum) document.all.next.style.visibility="hidden" //최대숫자보다 커질경우 아이콘 안보이게
}

js코드 예시는 그냥 쓴거임. document.all.prev.style.visibility="hidden";만 참고바람

https://developer.mozilla.org/ko/docs/Web/CSS/visibility

visibility - CSS: Cascading Style Sheets | MDN