js_javascript 기술에서 컨트롤을 숨기고 표시하는 두 가지 방법

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="";//display为空的话会好使，为block会使后边的空间换行
}
function visibilityHideUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="hidden";
}
function visibilityShowUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="visible";
}
</script>

값 설명
없음 이 요소는 표시되지 않습니다.
block 이 요소는 이 요소 앞과 뒤에 줄 바꿈이 있는 블록 수준 요소로 표시됩니다.
인라인 기본값. 이 요소는 요소 앞이나 뒤에 줄 바꿈이 없는 인라인 요소로 표시됩니다.
inline-block 인라인 블록 요소. (CSS2.1의 새로운 값)
list-item 이 요소는 목록으로 표시됩니다.
run-in 이 요소는 상황에 따라 블록 수준 요소 또는 인라인 요소로 나타납니다.
Compact CSS에는 Compact 값이 있지만 광범위한 지원이 부족하여 CSS2.1에서는 제거되었습니다.
마커 CSS에는 값 마커가 있지만 광범위한 지원이 부족하여 CSS2.1에서는 제거되었습니다.
table 이 요소는 테이블 앞뒤에 줄 바꿈이 있는 블록 수준 테이블(f5d188ed2c074f8b944552db028f98a1과 유사)로 표시됩니다.
inline-table 이 요소는 테이블 앞뒤에 줄 바꿈 없이 인라인 테이블(f5d188ed2c074f8b944552db028f98a1과 유사)로 표시됩니다.
table-row-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(92cee25da80fac49f6fb6eec5fd2c22a와 유사).
table-header-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(ae20bdd317918ca68efdc799512a9b39와 유사).
table-footer-group 이 요소는 하나 이상의 행 그룹으로 표시됩니다(06669983c3badb677f993a8c29d18845와 유사).
table-row 이 요소는 테이블 행으로 표시됩니다(a34de1251f0d9fe1e645927f19a896e8와 유사).
table-column-group 이 요소는 하나 이상의 열 그룹으로 표시됩니다(879b49175114808d868f5fe5e24c4e0b과 유사).
table-column 이 요소는 셀 열로 표시됩니다(581cdb59a307ca5d1e365becba940e05와 유사)
table-cell 이 요소는 테이블 셀로 표시됩니다(b6c5a531a458a2e790c1fd6421739d1c 및 b4d429308760b6c2d20d6300079ed38e와 유사)
table-caption 이 요소는 표 제목으로 표시됩니다(63bd76834ec05ac1f4c0ebbeaafb0994과 유사)
상속은 표시 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

오늘 해결한 문제는 jsp 페이지에서 css로 정의한 label.error 클래스에 ID를 부여한 다음, div가 접힐 때 js 프롬프트 정보가 지워지도록 ID의 가시성을 제어하는 ​​것입니다. 세부 내용은 다음과 같습니다.
인터페이스 준비 기능에서 var label1 = document.getElementById("label1");

$(document).ready(function() {
$(".flipp .span4").click(function() {
$(this).parent().next().toggle();
$(this).parent().parent().prevAll().find(".panel").hide();
$(this).parent().parent().nextAll().find(".panel").hide();
var label1 = document.getElementById("label1");
label1.style.display="none";
})

그런 다음 jsp에 해당 위치를 추가하세요.

<label class="error" id="label1" for="currentPWD" generated="true" style="display:inline"></label>

CSS에서 정의한 label.error 클래스의 경우 $("label.error").removeAttr("style").attr("style", "display: none;")을 사용하여 위의 결과를 얻을 수 있습니다. 기능. 게다가 지하의 해당 위치에 있는 라벨에 대해서는 id 값을 정의할 필요도 없을 것 같습니다.