찾다

집  >  기사  >  웹 프론트엔드  >  js_javascript 기술에서 컨트롤 숨기기 및 표시 속성 사용 소개

js_javascript 기술에서 컨트롤 숨기기 및 표시 속성 사용 소개

WBOY
WBOY원래의
2016-05-16 17:06:121087검색

JavaScript를 사용하여 컨트롤을 숨기는 방법에는 두 가지가 있습니다. 하나는 컨트롤 스타일의 "표시" 및 "가시성" 속성을 설정하는 것입니다. 컨트롤은 style.display="block" 또는 style.visibility="visible"인 경우 표시되고, style.display="none" 또는 style.visibility="hidden"인 경우에는 표시되지 않습니다. 차이점은 "표시"는 컨트롤을 숨길 뿐만 아니라 숨겨진 컨트롤도 표시될 때 더 이상 차지하지 않는 반면, "가시성"에 의해 숨겨진 컨트롤은 컨트롤이 보이지 않도록 설정하고 컨트롤은 여전히 ​​원래 위치를 차지한다는 것입니다. 위치.

코드 복사 코드는 다음과 같습니다.

function displayHideUI()
{
var ui = document.getElementById("bbs");
ui.style.display="none";
}
function displayShowUI()
{
var ui = document. getElementById(" bbs");
ui.style.display=" ";//디스플레이가 비어 있으면 작동하며 차단하면 다음 공간이 래핑됩니다.
}

함수 visibleHideUI()
{
var ui = document.getElementById("bbs");
ui.style.visibility="hidden";
}
function visibleShowUI()
{
var ui = document.getElementById("bbs");
ui.style.visibility="visible"
}



값 설명
none 이 요소는 표시되지 않습니다.
block 이 요소는 이 요소 앞뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.
인라인 기본값. 이 요소는 요소 앞이나 뒤에 줄 바꿈이 없는 인라인 요소로 표시됩니다.
inline-block 인라인 블록 요소. (CSS2.1의 새로운 값)
list-item 이 요소는 목록으로 표시됩니다.
run-in 이 요소는 상황에 따라 블록 수준 요소 또는 인라인 요소로 표시됩니다.
compact CSS에는 Compact 값이 있지만 폭넓은 지원이 부족하여 CSS2.1에서는 제거되었습니다.
마커 CSS에는 값 마커가 있지만 광범위한 지원이 부족하여 CSS2.1에서는 제거되었습니다.
table 이 요소는 테이블 앞뒤에 줄 바꿈이 있는 블록 수준 테이블(과 유사)로 표시됩니다.
inline-table 이 요소는 테이블 앞뒤에 줄 바꿈 없이 인라인 테이블(
과 유사)로 표시됩니다.
table-row-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(와 유사).
table-header-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(와 유사).
table-footer-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(와 유사).
table-row 이 요소는 테이블 행으로 표시됩니다(와 유사).
table-column-group 이 요소는 하나 이상의 열 그룹으로 표시됩니다(과 유사).
table-column 이 요소는 셀 열로 표시됩니다(과 유사).
table-cell 이 요소는 테이블 셀로 표시됩니다(
및 와 유사). )
table-caption 이 요소는 테이블 제목으로 표시됩니다(
과 유사)

inherit는 표시 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：IE 팝업 차단 방법 "지금 보고 있는 웹페이지가 창을 닫으려고 합니다. 이 창을 닫으시겠습니까?"다음 기사：IE 팝업 차단 방법 "지금 보고 있는 웹페이지가 창을 닫으려고 합니다. 이 창을 닫으시겠습니까?"

관련 기사

더보기